Question

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

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

HTML code：

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;
    }

  }

}

我不知道为什么我的代码无效。

这是我的Fiddle

Answer 1

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

初始化

var sum = 0;

另外，为了让它在小提琴中起作用，你需要改变

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

Answer 2

我不知道为什么你的小提琴无法让getTotal成为全球性的。但是你的主要问题是总和未定义为开始。这将导致NaN（非数字）：

var sum;

sum = 1 + sum; // NaN

...

sum = 1 + undefined; // NaN

sum = 1 + NaN; // NaN

Demo at jsbin.com

首先应将总和设为零：

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

Working demo as adrianp pointed out: It would probably be more clear if you uploaded the working code to jsbin.

Answer 3

您尚未定义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;
}

} }

<强> FIDDLE

Answer 4

你需要做两件事。 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 example

Answer 5

使用IsNumeric函数检查输入字段是否包含有效数字。请参阅：Validate decimal numbers in JavaScript - IsNumeric()

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

var elementValue = document.getElementById('total_' + i).value
IsNumeric(elementValue) ? elementValue : elementValue = 0;

求和字的问题

5 个答案: