我收到一个 NaN 错误答案

【问题标题】：I'm getting a NaN error我收到一个 NaN 错误
【发布时间】：2014-07-01 18:21:55
【问题描述】：

我在这个计算器脚本中遇到了一个 NaN 错误：有什么想法吗？

以下是文本格式的整个 html：

https://www.dropbox.com/s/i3u429bn5bjd4i9/orecalculator.txt

<script language="JavaScript">

var IDs = [22,17425,17426,1223,17428,17429,1225,17432,17433,1232,17436,17437,1229,17865,17866,21,17440,17441,1231,17444,17445,1226,17448,17449,20,17452,17453,11396,17869,17870,1227,17867,17868,18,17455,17456,1224,17459,17460,1228,17463,17464,19,17466,17467,1230,17470,17471];

function calculate(i){
    while (i + 1 < IDs.length) {
        var y=document.getElementById('reward');
        var x=document.getElementById(IDs[i]);
        y.value=parseInt(y.value)+parseInt(x.value);
        i++;
    }
}
</script>

【问题讨论】：

你的 HTML 是什么样的？这些元素中至少有一个没有可以解析的值。
y 或 x 可能有一个未定义的值，或者一个您不期望的值。
你如何以及在哪里打电话给calculate？特别是：你通过了什么？
calculate第一次运行，Reward有值吗？我可以看到您正在跟踪总数，但它不是从我看到的 0 开始，它有一个空值。
你得到它是因为大多数带有 ID-s 的inputs 可能是空的。对空字符串调用 parseInt() 会返回 NaN。

标签： javascript html calculator

【解决方案1】：

我已在控制台中运行此代码并找到以下输出

document.getElementById('reward')
//output <input type="text" id="reward">
document.getElementById('reward').value
//""
parseInt(document.getElementById('reward').value)
//NaN
parseInt("")
//NaN

说明

空字符串的parseInt是NaN

解决方案

使用

Reward: <input type="text" id="reward" value="0">

改为

Reward: <input type="text" id="reward">

修正：JS 代码

function calculate(i){
    while (i + 1 < IDs.length) {
        var y=document.getElementById('reward');
        var x=document.getElementById(IDs[i]);
        y.value=parseInt(y.value|0)+parseInt(x.value|0);
        i++;
    }
}

【讨论】：

在 JS 中加入故障保险也是值得的。
@Bergi, @-0_0 - 对不起，我没接你？
在 JavaScript 代码中可以做些什么来防止这个错误？例如。当用户清空其中一个输入时，JS 应该仍然可以工作。你能建议更新一下脚本吗？
现在parseInt 是多余的……

【解决方案2】：

未经测试，但应该是这样的：

calculate = function (i){

    var y = document.getElementById('reward');
    var x = 0;  
    while (i + 1 < IDs.length) {

        var elm = document.getElementById(IDs[i]);
        x+=parseInt(elm.value||0);
        i++;
    }
    y.value = x;
};

工作小提琴：

http://jsfiddle.net/g30rg3/8ADQX/

【讨论】：

修复并添加了一个工作小提琴。这是一个更好的性能明智，因为您不必扫描文档以查找每个 id 的奖励元素。它还将计算定义为全局变量，以便输入可以访问它。
小提琴中也没有任何解释:-(
请解释问题是什么
我仍然认为 OP 试图动态求和到 y.value，但第一次运行时，reward 是值。因此，y.value 是未定义的，parseInt(y.value) 是 NaN。这只是绕过使用 y.value 直到结束。在 JS 或 HTML 中添加默认值也可以。更具体地说：这不会“获取” y.value，它只是“设置”，它在一个临时变量中求和并在最后分配，而不是连续分配给 y.value。
@ಠ_ಠ 实际上一个空输入的.value 是空字符串""，而不是undefined。其中，当您调用parseInt 时，也会产生NaN