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

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属性只能应用于inputorselect元素。

请注意，您需要将字符串值转换为数字，否则您将获得字符串连接。可以用parseIntorparseFloat函数来完成。

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

Answer 2

那是因为：

document.getElementById("run").value

将是undefined和undefined + 1 == NaN。

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

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

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

额外的基数 - 10 - 是转换可能被解释为八进制数的字符串所必需的:)

Answer 3

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

让我们检查一下您的plus函数中发生了什么。首先，您通过其 id 获得一个元素，其中

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

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

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

DOM 元素有很多不错的属性，但它们nodeValue总是等于 null。因此，如果您想使用其文本内容，您可以查找子 textNodes - 或仅使用innerHTML属性。这是一个字符串，是的，但是如果它是数字，Javascript 会设法将它转换为普通数字（据我记得 0 是数字：）。

所以你的plus函数实际上可以这样写（证明）：

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

Answer 4

尝试这个

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

Answer 5

因为属性值始终是字符串，而 string + 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 6

因为value是HTMLInputElement的属性并且TD元素不是 anHTMLInputElement而是 a 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;
}

为了转换 Number 中的值，我使用了一元加运算符。您还可以检查它是否NaN在使用之前，例如：

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

    td.innerHTML = value + 1;
}

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

此外，我想说在支持的情况下使用textContent属性可能会更好，但是处理所有浏览器的代码会有点复杂（例如，在某些 IE 版本中你需要使用它innerText），并且innerHTML在大多数情况下可能会很好的案例。