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

当我点击“+ 1”，然后在“0”出现“NaN”。为什么？为什么这个函数返回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); 
}

来源

2012-06-15 xRobot

也许另一个你可以做到这一点：http://jsfiddle.net/userdude/UUdV8/ –

它发生，因为可以只适用于input或select元件value属性。

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

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

来源

2012-06-15 11:08:02 VisioN

+1也可以使用'+'运算符。 – pimvdb

围绕'val + 1'的圆括号是什么？ –

@JaredFarrish这是无害的，但“突出”代码中的添加。 – VisioN

试试这个

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

来源

2012-06-15 11:08:47

这是因为：

document.getElementById("run").value

将undefined和undefined + 1 == NaN。

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

另外，还要注意'0' + 1 == '01'，所以你必须做一些铸造，以及：

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

额外的基数 - 10 - 要转换的是可能被解释为八进制数字:)

来源

2012-06-15 11:08:52

是的，我并没有想'td'元素具有'value'属性。猜猜有一个疯狂的冲动纠正所有其他答案在三，二，一... –

串

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

或者使用~~()功能为目的，但这样会导致无法读取源。

来源

2012-06-15 11:09:45

“字符串+ 1是NaN” - 不幸的是不正确。 – pimvdb

'~~'截断一个数字。如果想要显示转换类型的其他可能性，请尝试使用'Number（）'或'+'。 – VisioN

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

让我们来看看plus函数中会发生什么。首先，您可以通过它的id来获取一个元素，

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

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

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

DOM元素有很多漂亮的性质，但他们的nodeValue是总是等于空。因此，如果您想使用其文本内容，则可以查找子文本节点 - 或仅使用innerHTML属性。这是一个字符串，是的，但是Javascript会设法将它转换为一个正常的数字，如果它是数字的（0是数字，我记得:)。

所以你plus功能可以实际写入就像这样（the proof）：

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

来源

2012-06-15 11:23:39 raina77ow

因为value是HTMLInputElement属性和TD元素不是HTMLInputElement但HTMLTableCellElement，因此不存在该属性和：

undefined + 1; // NaN - Not a Number

你基本上可以使用和你一样的innerHTML属性T中的内容也得到它：

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

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

要转换的号码我用了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版本中，您需要使用innerText代替），并且在大多数情况下，innerHTML可能会很好。

来源

2012-06-15 11:29:56 ZER0

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

回答

相关问题