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

So far I'm stuck here. I continue to get NAN as a result. I tried by starting off with a paragraph and fetching number 0 but returns "cannot read properties of null (reading '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>

Solution

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>