为什么此函数返回 Nan 错误

Why this function return Nan error?

本文关键字：Nan 错误 返回 函数 为什么      更新时间：2023-09-26

当我单击"+ 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 );
}

发生这种情况是因为value属性只能应用于input或select元素。

请注意，您需要将字符串值转换为数字，否则将获得字符串连接。它可以通过parseInt或parseFloat功能来完成。

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

那是因为：

document.getElementById("run").value

将undefined和undefined + 1 == NaN.

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

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

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

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

试试这个

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

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

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

我想这个问题仍然应该得到更好的答案，但我可能是错的。

让我们检查一下您的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++;

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

为了转换数字中的值，我使用了一元加号运算符。您还可以在使用前检查它是否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在大多数情况下可能很好。

相关文章：