Question

当我点击“+ 1”时，然后在“0”中出现“NaN”。为什么？

HTML：

<table>
<tr><td id="run">0</td></tr>
</table>
<a href="#" onclick="plus();">+ 1 </a>

JS：

function plus(){
document.getElementById("run").innerHTML = ( document.getElementById("run").value + 1 );
}

Answer 1

这是因为value属性只能应用于input或select元素。

注意您需要将字符串值转换为数字，否则您将获得字符串连接。可以使用parseInt或parseFloat函数完成此操作。

var val = parseInt(document.getElementById("run").innerHTML, 10);
document.getElementById("run").innerHTML = ( val + 1 );

Answer 2

那是因为：

document.getElementById("run").value

将是undefined和undefined + 1 == NaN。

输入框具有value属性，但<td />之类的节点有.innerHTML()或.innerText()。

另外，请注意'0' + 1 == '01'，因此您还必须进行一些投射：

parseInt(document.getElementById('run').innerHTML, 10) + 1;

附加基数 - 10 - 是转换可能被解释为八进制数字的字符串所必需的：）

Answer 3

试试这个

function plus(){
document.getElementById("run").innerHTML = parseInt( document.getElementById("run").value) + 1;
}

Answer 4

因为属性值始终是字符串，而字符串+ 1是JavaScript中的NaN。

要解决此问题，请使用string.toFloat()：

function plus(){
    document.getElementById("run").innerHTML = ( document.getElementById("run").value.toFloat() + 1 );
}

或使用parseInt()：

function plus(){
    document.getElementById("run").innerHTML = ( parseInt(document.getElementById("run").value) + 1 );
}

或者使用~~()函数作为技巧，但这将导致不可读的来源。

Answer 5

我想这个问题仍然值得一个更好的答案，但我可能错了。）

让我们检查一下plus函数中会发生什么。首先，您使用

获取其ID的元素

var targetElement = document.getElementById('run');

它实际上是对DOMElement类型对象的引用。通过检查其nodeType属性很容易看到。

if (targetElement.nodeType === 1) { alert("It's an element!"); }

DOM Elements有很多不错的属性，但是nodeValue 总是等于null 。因此，如果您想使用其文本内容，您可以查找子textNodes - 或者只使用innerHTML属性。这是一个字符串，是的，但是Javascript会设法将它转换为正常数字，如果它是数字的（0是数字，从我记忆中:) :.

因此，您的plus函数实际上可以像这样编写（the proof）：

document.getElementById('run').innerHTML++;

Answer 6

因为value是HTMLInputElement的属性而TD元素不是HTMLInputElement而是HTMLTableCellElement，所以没有该属性：

undefined + 1; // NaN - Not a Number

您基本上可以使用与设置内容相同的innerHTML属性来获取它：

function plus() {
    // no need to execute `getElementById` twice
    var td = document.getElementById("run");

    td.innerHTML = +td.innerHTML + 1;
}

要转换数字I中的值，请使用unary plus operator。您还可以在使用之前检查它是否为NaN，例如：

function plus() {
    var td = document.getElementById("run");
    var value = +td.innerHTML || 0;

    td.innerHTML = value + 1;
}

在这种情况下，如果它是NaN（或0，但在这种情况下它是一个身份）将设置为0，并且计数将从1开始而不会给出任何错误。

另外，我会说最好使用支持的textContent属性，但是处理所有浏览器的代码会更复杂一些（例如在某些IE版本中你需要使用{{ 1}}代替），innerText在大多数情况下可能都很好。

为什么这个函数返回Nan错误？

6 个答案: