javascript - 使用 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 因为 .value的 <p>元素未定义。结果你这样做:

undefined + 1

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

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