如何在 HTML 中连续更新和显示号码？

Question

到目前为止我被困在这里。结果我继续得到 NAN。我尝试从一个段落开始并获取数字 0，但 returns“无法读取 null 的属性（读取 'addEventListener'）”

<html>
<style>
</style>
<body>
 <p id="result" value=0>
      0
 </p>
 <button id="func">RUN IT</button>
 <script> 
document.getElementById("func").addEventListener("click", () => {
 var n = document.getElementById("result");
 console.log(result);
 if (n != 10) {
      n++;
      
document.getElementById("result").innerHtml = n;
 }});
</script>
</body>
</html>

Answer 1

document.getElementById("func").addEventListener("click", () => {
  var n_isADomElement = document.getElementById("result");
  let v = +n_isADomElement.innerText
  
  if (v != 10) {
    v++;
    n_isADomElement.innerText = v;
  }
  
});

<html>
<style>

</style>

<body>
  <p id="result" value=0>
    0
  </p>
  <button id="func">RUN IT</button>
</body>

</html>

Answer 2

如果我对你的问题的理解正确，你想在每次单击按钮时将结果加 10。

  let result = document.querySelector('#result');
        document.querySelector('#func').addEventListener('click', (e) => {
            if (result.textContent != 10) {
                result.textContent++
            }
        })

<p id="result">0</p>
    <button id="func">RUN IT</button>

希望我能帮到你

如何在 HTML 中连续更新和显示号码？

How do I have a number update and display live in HTML consecutively?

html

javascript

numbers

element