使用JavaScript对DOM对象执行算术运算的正确方法是什么？

Question

我一直在尝试使用以下代码从段落标记中的值加1，但仅将NaN作为输出值：

<p id="myNumber">5</p>
<button onclick="increment()">Click</button>

<script>
function increment() {
    document.getElementById("myNumber").innerHTML = document.getElementById("myNumber").value + 1;
}
</script>

谁能说出为什么输出NaN？

Answer 1

这是NaN，因为<p>元素的.value是未定义的。 结果，您正在执行以下操作：

undefined + 1

那是NaN。 根据结构，使用.textContent或.innerHTML从元素获取值，然后使用parseInt。

function increment() {
    document.getElementById("myNumber").textContent = parseInt(document.getElementById("myNumber").textContent,10) + 1;
}

Answer 2

您需要将myNumber的innerText （String）属性解析为一个整数：

document.getElementById("myNumber").innerText = parseInt(document.getElementById("myNumber").innerText) + 1;