why cannot set property innerhtml of null showing

Question

Why I cannot set property innerhtml of null showing?

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            var scr1 = 0;
            var scr2 = 0;
document.getElementById("demo").innerHtml= "Paragraph changed!";

document.getElementById("CS").innerHtml = "Your Score :"



function srt() {
 var a = document.getElementById("none");
     a.style.boxShadow = "none"
     setTimeout(function re(){
         a.style.boxShadow = "-4px -4px grey"
     },200)
}

        </script>
    </head>
    <body>
    <h2 class="scr1" id="dome">Your Score :</h1>
    <h2 class="scr2" id="CS">Com Score :</h2>
    <br />
    <br />
    <center>
    <div class="mid"></div>
    <div class="srt" id="none">
        <h4>Start</h4>
    </div>
    </center>

    </body>
</html>

Please help me with this code

Inner HTML not working I can't find where is error so please help me

It is `innerHTML` not `innerHtml`. Also at the time of the assignment your DOM is not ready. https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t — Lain, Jul 23 '18 at 06:13

score 0 · Answer 1 · answered Jul 23 '18 at 06:25

You have a few issues with your code:

innerHtml isn't a property, you instead need to use innerHTML
You are trying to target elements in your js code before they are loaded on the page (the DOM - Document Object Model, isn't ready yet). To overcome this you can call your code when your page has loaded. You can do this by using window.onload=init, where init is a function, which runs when the page has loaded.
Your targeting the id demo in your javascript but you do not have an element with the id demo in your HTML, you have the id dome so I'm assuming dome is supposed to say demo

Fixing all of these things will fix your issue.

See a working example bellow:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script>
    function init() {

      var scr1 = 0;
      var scr2 = 0;
      document.getElementById("demo").innerHTML = "Paragraph changed!";

      document.getElementById("CS").innerHTML = "Your Score :";

      function srt() {
        var a = document.getElementById("none");
        a.style.boxShadow = "none";
        setTimeout(function re() {
          a.style.boxShadow = "-4px -4px grey";
        }, 200);
      }

    }
    
    window.onload = init;
  </script>
</head>

<body>
  <h2 class="scr1" id="demo">Your Score :</h1>
    <h2 class="scr2" id="CS">Com Score :</h2>
    <br />
    <br />
    <center>
      <div class="mid"></div>
      <div class="srt" id="none">
        <h4>Start</h4>
      </div>
    </center>

</body>

</html>

score 0 · Answer 2 · answered Jul 23 '18 at 06:26

Move your script tag to the bottom of page just below the body close tag .

Also you are referring to an element "dome", but in html you have element "demo", make them both the same

document.getElementById("demo").innerHTML = "Paragraph changed!";

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>

</head>

<body>
  <h2 class="scr1" id="dome">Your Score :</h1>
    <h2 class="scr2" id="CS">Com Score :</h2>
    <br />
    <br />
    <center>
      <div class="mid"></div>
      <div class="srt" id="none">
        <h4>Start</h4>
      </div>
    </center>
    <script>
      var scr1 = 0;
      var scr2 = 0;
      document.getElementById("dome").innerHTML = "Paragraph changed!";

      document.getElementById("CS").innerHtml = "Your Score :"



      function srt() {
        var a = document.getElementById("none");
        a.style.boxShadow = "none"
        setTimeout(function re() {
          a.style.boxShadow = "-4px -4px grey"
        }, 200)
      }
    </script>
</body>

</html>

why cannot set property innerhtml of null showing

2 Answers2