2

这是一个基本的 html/javascript 代码，但我在获取所有字段的总和时遇到问题。（原来项目中有50个字段，但现在我只留下5个）

如果该字段为空白，则只需忽略它，并仅添加已填充字段的字段。

HTML 代码：

value1:<input type="text" id="total_1" ><br>
value2:<input type="text" id="total_2" ><br>
value3:<input type="text" id="total_3" ><br>
value4:<input type="text" id="total_4" ><br>
value5:<input type="text" id="total_5" ><br>
total:<input type="text" id="totalresult" >
<button type="button" onclick="getTotal(); return false;">Get total</button>

Javascript：

function getTotal() {
var sum;
for (i = 1; i <=5 ; i++) {
    var total = document.getElementById('total_' + i.toString()).value;
    if (total != '') {
        sum = parseFloat(total) + sum;
        document.getElementById('totalresult').value = sum;
    }

  }

}

我不知道为什么我的代码不起作用。

这是我的小提琴

4

5 回答 5

3

您的代码第一次运行时， sum 将是未定义的。

初始化

var sum = 0;

为了让它在小提琴中工作，你需要改变

左上角的 onLoad 到 'No wrap - in'

于 2013-04-11T18:53:06.640 回答
1

你需要做两件事。1、将sum初始化为零。2、检查输入值是否不是数字。

function getTotal() {
    var sum = 0;
    for (i = 1; i <= 5; i++) {
        var total = document.getElementById('total_' + i).value;
        if (!isNaN(parseFloat(total))) sum = parseFloat(total) + sum;
        document.getElementById('totalresult').value = sum;
    }
}

jsFiddle 示例

于 2013-04-11T19:00:53.880 回答
1

我不知道为什么你的小提琴无法弄出getTotal一个全球性的。但是您的主要问题是总和未定义为开始。这将导致NaN(Not a Number) ：

var sum;

sum = 1 + sum; // NaN

……

sum = 1 + undefined; // NaN

sum = 1 + NaN; // NaN

jsbin.com 上的演示

您应该首先将 sum 设置为零：

var sum = 0;
for ( ... ) { ...

adrianp 指出的工作演示：It would probably be more clear if you uploaded the working code to jsbin.

于 2013-04-11T18:54:28.853 回答
1

您尚未定义 sum 变量，因此 javascript 将其视为 NaN，这意味着不是数字。您需要对其进行初始化以正确设置。

  function getTotal() {
            var sum = 0;
    for (i = 1; i <=5 ; i++) {
    var total = document.getElementById('total_' + i.toString()).value;
if(isNaN(total) || total.indexOf(' ') == 1) {
    alert("Please type a number");
    document.getElementById("totalresult").value = "I cant sum alphanumerics";
    return false;
} 

if (total != '') {
    sum = parseFloat(total) + sum;
    document.getElementById('totalresult').value = sum;
}

} }

小提琴

于 2013-04-11T18:55:47.620 回答
0

使用IsNumeric函数检查输入字段是否有有效数字。请参阅：在 JavaScript 中验证十进制数字 - IsNumeric()

这是我改进 for 循环中代码的建议：

var elementValue = document.getElementById('total_' + i).value
IsNumeric(elementValue) ? elementValue : elementValue = 0;
于 2013-04-11T19:26:03.140 回答