爲什麼這個函數返回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錯誤？

回答

相關問題