0

我正在尝试从字段中获取自动求和，问题是如果字段总数没有值，则脚本无法正常工作，并且如果再次有超过 7 个字段，则脚本无法正常工作。

这是javascript：

function getTotal()
{
    var value01 = document.getElementById('value01').value;
    var value02 = document.getElementById('value02').value;
    var value03 = document.getElementById('value03').value;
    var value04 = document.getElementById('value04').value;
    var value05 = document.getElementById('value05').value;
    var value06 = document.getElementById('value06').value;
    var value07 = document.getElementById('value07').value;

    // Add them together and display
    var sum = parseInt(value01) + parseInt(value02) + parseInt(value03) + parseInt(value04) + parseInt(value05) + parseInt(value06) + parseInt(value07);
    document.getElementById('sum_total').value = sum;
}

输入：

<input type="text" id="value01" />
<input type="text" id="value02" />
<input type="text" id="value03" />
here is starting to be added with a button more input fields.
<input type="text" id="+" />
<input type="text" id="++" />
<input type="button" value="Add Them Together" onclick="getTotal();" />

我的问题是，我怎样才能在 var value01 02 03 等上获得自动 +。

任何帮助表示赞赏。

4

1 回答 1

1

您的问题不是很清楚，因此我不太确定您想要做什么，因此请随时提供澄清以获得最佳帮助。关于这一点，根据您提供的内容，我有两点需要指出：

1）您的“+”号无效。根据HTML 4 规范：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

2) 我建议不要创建一个包含每个值的不同 var，而是创建一个可以在 for 循环中使用的函数，该函数将确定每个增量输入的总和。如果输入的数量增加，这更 DRY 并且有助于简化事情。

function getValues(id){
    return document.getElementById(id).value;
}

下面的纯 JavaScript 解决方案从一个输入框开始，只需单击一个按钮即可添加其他输入，我相信这就是您正在寻找的。您可以相应地修改初始输入框的数量，但它应该给您一个想法。

Javascript：

var max = 1;

function getValues(id){
    var result = document.getElementById(id).value;
    return (result ? result : 0);
}

function addInput(){
    max++;
    var input = '<input type="text" id="value'+ max +'" />';
    document.getElementById("valuesContainer").innerHTML += input;
}

function getTotal(){
    var sum = 0;
    for(var i=1; i <= max; i++){
        sum = sum + parseFloat(getValues("value" + i));
    }
    document.getElementById("total").innerHTML = sum;
}

HTML：

<div id="valuesContainer">
<input type="text" id="value1" />
</div>
<input type="button" value="Add Value" id="addMore" onclick="addInput();" />
<input type="button" value="Calculate Total" onclick="getTotal();" />
<div id="total"></div>

演示：http: //jsfiddle.net/Y4xgU/

于 2013-01-20T00:57:25.780 回答