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

<p>要素の.valueが定義されていないので、それはNaNです。結果としてあなたはこれをしています：

undefined + 1 

これはNaNです。構造体に応じて、.textContentまたは.innerHTMLを使用して要素から値を取得し、parseIntを使用します。

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

Answer 2

あなたは整数としてmyNumberのinnerText（文字列）プロパティを解析する必要があります。

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