Getting error of Null type with getelementbyid in html

Question

I am Struck at simple code , getelementbyid.innerHtml in html page. Please help me.

<!doctype html>
<html lang="en">
 <head>
  <title>Dom examples</title>
  <script>
   var code = document.getElementById("one").innerHTML;
   code = code + " !!";
   console.log(code);
  </script>
 </head>
 <body>
  <h4> DOM practise page </h4>
  <p id="one"> This page is for practise of DOM model in JS</p>
  <p id="two"> Thank You </p>
 </body>
</html>

Because element with id=one not loaded yet – Narek-T Aug 05 '17 at 17:20 — Narek-T, Aug 05 '17 at 17:20
Have you tried `.innerText` instead of `.innerHTML`? – Reporter Aug 05 '17 at 17:20 — Reporter, Aug 05 '17 at 17:20

score 0 · Answer 1 · answered Aug 05 '17 at 17:20

0

Your javascript is called before your browser render your HTML page. So when your browser call getElementById the ID isn't defined.

Just move your javascript at the end of your file

answered Aug 05 '17 at 17:20

sheplu

2,754
2
19
19

It would be enough to move the script tag after html tags. – Reporter Aug 05 '17 at 17:21

score 0 · Answer 2 · answered Aug 05 '17 at 17:21

0

Just move the script below... the causing is beacause the id isnt render yet.

<!doctype html>
<html lang="en">
 <head>
  <title>Dom examples</title>
  
 </head>
 <body>
  <h4> DOM practise page </h4>
  <p id="one"> This page is for practise of DOM model in JS</p>
  <p id="two"> Thank You </p>
 </body>
    <script>
   var code = document.getElementById("one").innerHTML;
   code = code + " !!";
   console.log(code);
  </script>
</html>

answered Aug 05 '17 at 17:21

Jesus Carrasco

1,356
1
8
15

I am a new beginner to JS and Html. your suggestion helped me !! Thank you so much !! It worked :-) – Satish Marni Aug 05 '17 at 17:25

score 0 · Answer 3 · answered Aug 05 '17 at 17:22

Utilize onload property of window to call a function when window has loaded

<!doctype html>
<html lang="en">

<head>
  <title>Dom examples</title>
  <script>
    onload = function() {
      var code = document.getElementById("one").innerHTML;
      code = code + " !!";
      console.log(code);
    }
  </script>
</head>

<body>
  <h4> DOM practise page </h4>
  <p id="one"> This page is for practise of DOM model in JS</p>
  <p id="two"> Thank You </p>
</body>

</html>

score 0 · Answer 4 · answered Aug 05 '17 at 17:22

just put the script part before close body and it will work.

<!doctype html>
<html lang="en">
    <head>
        <title>Dom examples</title>
    </head>
    <body>
        <h4> DOM practise page </h4>
        <p id="one"> This page is for practise of DOM model in JS</p>
        <p id="two"> Thank You </p>

        <script>
            var code = document.getElementById("one").innerHTML;
            code = code + " !!";
            console.log(code);
        </script>
    </body>
</html>

score 0 · Answer 5 · answered Aug 05 '17 at 17:23

Browsers parses html page from top to down. So, if you put your script in the head, it will get rendered first and then your body. So your script is searching for an id which is yet not rendered to the DOM.

By placing script at the bottom, it solves your problem.

<!doctype html>
<html lang="en">
 <head>
  <title>Dom examples</title>
 </head>
 <body>
  <h4> DOM practise page </h4>
  <p id="one"> This page is for practise of DOM model in JS</p>
  <p id="two"> Thank You </p>
    <script>
   var code = document.getElementById("one");
   code = code.innerHTML + " !!";
   console.log(code);
  </script>
 </body>
</html>

score 0 · Answer 6 · answered Aug 05 '17 at 17:23

It is working fine just use script tag in end. For more clearity check. https://jsfiddle.net/djmayank/Lzewxgyw/

HTML

<head>
        <title>Dom examples</title>

    </head>
    <body>
        <h4> DOM practise page </h4>
        <p id="one"> This page is for practise of DOM model in JS</p>
        <p id="two"> Thank You </p>
    </body>

JS

var code = document.getElementById("one").innerHTML;
        code = code + " !!";
        console.log(code);

score 0 · Answer 7 · answered Aug 05 '17 at 17:29

The script is loaded before your element with the id of one is loaded, therefore one does not exist yet. You have the following options:

You put the script after the tag you need: <!doctype html> <html lang="en"> <head> <title>Dom examples</title> </head> <body> <h4> DOM practise page </h4> <p id="one"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> <script> var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); </script> </body> </html>
Make a function and use the onload attribute, which is preferable, as the code will be reusable for other features: <!doctype html> <html lang="en"> <head> <title>Dom examples</title> <script> function myFunction() { var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); } </script> </head> <body> <h4> DOM practise page </h4> <p id="one" onload="myFunction()"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> </body> </html>

Getting error of Null type with getelementbyid in html

7 Answers7