JavaScript를 사용하여 DOM 객체에서 산술 연산을 수행하는 올바른 방법은 무엇입니까?

Question

I 단락 태그 내의 값에서 1을 추가하려면 다음 코드를 사용하려고하지만 출력 값으로 NaN이를 얻을 수 있었어요이가 NaN를 출력하는 이유

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

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

사람이 말할 수 있습니까?

Answer 1

그것은 NaN가됩니다. 결과적으로 다음을 수행합니다.

undefined + 1 

NaN은 다음 중 하나입니다. 구조에 따라 .textContent 또는 .innerHTML을 사용하여 요소의 값을 가져온 다음 parseInt를 사용합니다.

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

Answer 2

당신은 정수로 myNumber의 innerText (문자열) 속성을 구문 분석 할 필요가 다음 <p> 요소의 .value이 정의되어 있기 때문에

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