Cannot set property innerHTML of null

Question

Why do I get an error or Uncaught TypeError  Cannot set property  innerHTML  of null  I thought I understood innerHTML and had it working before    lt  DOCTYPE HTML gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt   lt title gt Untitled Document lt  title gt    lt script type   text javascript  gt      what        function what            document getElementById  hello   innerHTML    hi           lt  script gt    lt  head gt    lt body gt   lt div id  hello  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

This error can appear even if you load your script after the html render is finished. In this given example your code

<div id="hello"></div>

has no value inside the div. So the error is raised, because there is no value to change inside. It should have been

<div id="hello">Some random text to change</div>

then.

User · Answer

There are different possible cause as discussed would just like to add this for someone who might have the same issue as mine  In my case I had a missing close div as shown below     lt  DOCTYPE HTML gt      lt html gt      lt head gt      lt meta http-equiv  quot Content-Type quot  content  quot text html  charset UTF-8 quot  gt      lt title gt Untitled Document lt  title gt      lt  head gt      lt body gt      lt div gt    I am an open div      lt div id  quot hello quot  gt  lt  div gt      lt script type   quot text javascript quot  gt         what           function what              document getElementById  hello   innerHTML    hi                 lt  script gt      lt  body gt      lt  html gt   Missing a close div can result in disorganization of the transversal from child to parent or parent to child hence resulting in an error when you try to access an element in the DOM

User · Answer

x000D   x000D   lt  DOCTYPE HTML gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt  x000D   lt title gt Untitled Document lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div id  hello  gt  lt  div gt  x000D   lt script type   text javascript  gt  x000D      what    x000D      function what    x000D          document getElementById  hello   innerHTML    hi   x000D         x000D   lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You have to place the hello div before the script  so that it exists when the script is loaded

User · Answer

The JavaScript part needs to run once the page is loaded  therefore it is advised to place JavaScript script at the end of the body tag   x000D   x000D   lt  DOCTYPE HTML gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt   lt title gt Example lt  title gt    lt  head gt   lt body gt   lt div id  hello  gt  lt  div gt   lt script type   text javascript  gt      what        function what            document getElementById  hello   innerHTML    hi           lt  script gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Here Is my snippet try  it  I hope  it will helpfull for u   x000D   x000D   lt  DOCTYPE HTML gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt  x000D   lt title gt Untitled Document lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     x000D   lt div id  hello  gt  lt  div gt  x000D     x000D   lt script type   text javascript  gt  x000D      what    x000D      function what    x000D          document getElementById  hello   innerHTML    hi   x000D         x000D   lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You could try using the setTimeout method to make sure your html loads first

User · Answer

You need to change div into p  Technically innerHTML means it is inside the  lt     id    gt  lt      gt  part   Change    lt div id  hello  gt  lt  div gt    into   lt p id  hello  gt  lt  p gt    Doing   document getElementById  hello   innerHTML    hi     will turn    lt div id  hello  gt  lt  div gt  into this  lt div id  hello  gt hi lt  div gt    which actually does not make sense   You can  also try to change   document getElementById  hello   innerHTML    hi     into this   document getElementById  hello   innerHTML   lt p gt  hi  lt  p gt       to make it work

User · Answer

Add jquery into  lt  head    lt script src  https   ajax googleapis com ajax libs jquery 3 1 0 jquery min js  gt  lt  script gt    Use  document ready       the code can be in  lt  head  or in a separate file like main js  1  using js in same file  add this in the  lt  head      lt script gt     document   ready function     function what        document getElementById  hello   innerHTML    hi           lt  script gt    2  using some other file like main js  add this in the  lt  head      lt script type  text javascript  src   path to main js  charset  utf-8  gt  lt  script gt    and add the code in main js file

User · Answer

maybe this will work  document getElementsByTagName  body   0  innerHTML

User · Answer

Let us first try to understand the root cause as to why it is happening in first place      Why do I get an error or Uncaught TypeError  Cannot set property    innerHTML  of null    The browser always loads the entire HTML DOM from top to bottom  Any JavaScript code written inside the script tags  present in head section of your HTML file  gets executed by the browser rendering engine even before your whole DOM  various HTML element tags present within body tag  is loaded   The scripts present in head tag are trying to access an element having id hello even before it has actually been rendered in the DOM  So obviously  JavaScript failed to see the element and hence you end up seeing the null reference error      How can you make it work as before    You want to show the  hi  message on the page as soon as the user lands on your page for the first time  So you need to hook up your code at a point when you are completely sure of the fact that DOM is fully loaded and the hello id element is accessible available  It is achievable in two ways    Reorder your scripts  This way your scripts get fired only after the DOM containing your hello id element is already loaded  You can achieve it by simply moving the script tag after all the DOM elements i e  at the bottom where body tag is ending  Since rendering happens from top to bottom so your scripts get executed in the end and you face no error     x000D   x000D       lt  DOCTYPE HTML gt  x000D       lt html gt  x000D       lt head gt  x000D       lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt  x000D       lt title gt Untitled Document lt  title gt  x000D       lt  head gt  x000D       x000D       lt body gt  x000D       lt div id  hello  gt  lt  div gt  x000D       x000D       lt script type   text javascript  gt  x000D          what    x000D          function what    x000D              document getElementById  hello   innerHTML    hi   x000D             x000D       lt  script gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D     Use event hooking  Browser s rendering engine provides an event based hook through window onload event which gives you the hint that browser has finished loading the DOM  So by the time when this event gets fired  you can be rest assured that your element with hello id already loaded in the DOM and any JavaScript fired thereafter which tries to access this element will not fail  So you do something like below code snippet  Please note that in this case  your script works even though it is present at the top of your HTML document inside the head tag      x000D   x000D   lt  DOCTYPE HTML gt  x000D           lt html gt  x000D           lt head gt  x000D           lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt  x000D           lt title gt Untitled Document lt  title gt  x000D           lt script type   text javascript  gt  x000D              window onload   function     x000D              what    x000D              function what    x000D                  document getElementById  hello   innerHTML    hi   x000D                 x000D            x000D           lt  script gt  x000D           lt  head gt  x000D           x000D           lt body gt  x000D           lt div id  hello  gt  lt  div gt  x000D           lt  body gt  x000D           lt  html gt  x000D   x000D   x000D

User · Answer

I have had the same problem and it turns out that the null error was because I had not saved the html I was working with    If the element referred to has not been saved once the page is loaded is  null   because the document does not contain it at the time of load  Using window onload also helps debugging   I hope this was useful to you

User · Answer

Just put your JS in window onload  window onload   function              what             function what                 document getElementById  hello   innerHTML    hi

User · Answer

You could tell javascript to perform the action  onload      Try with this    lt script type   text javascript  gt  window onload   function what    document getElementById  hello   innerHTML    hi       lt  script gt

User · Answer

Let the DOM load  To do something in the DOM you have to Load it first  In your case You have to load the  lt div gt  tag first  then you have something to modify  if you load the js first then that function is looking your HTML to do what you asked to do  but when that time your HTML is loading and your function cant find the HTML  So you can put the script in the bottom of the page  inside  lt body gt  tag then the function can access the  lt div gt  Because DOM is already loaded the time you hit the script

User · Answer

The root cause is  HTML on a page have to loaded before javascript code   Resolving in 2 ways   1  Allow HTML load before the js code    lt script type   text javascript  gt      window onload   function what            document getElementById  hello   innerHTML    hi          lt  script gt     or set time out like this   lt script type   text javascript  gt      setTimeout function           what           function what              document getElementById  hello   innerHTML    hi                    50         NOTE  50 is milisecond   lt  script gt    2  Move js code under HTML code   lt div id  hello  gt  lt  div gt   lt script type   text javascript  gt      what        function what            document getElementById  hello   innerHTML    hi           lt  script gt

User · Answer

I have done all the solutions mentionned here  but they didn t work until i have made this one using Jquery    in my HTML page     gt   lt div  id  labelid   gt   lt  div gt    and when i click on a button  i put this in my JS file        labelid   html   lt label gt Salam Alaykom lt  label gt

User · Answer

x000D   x000D   lt  DOCTYPE HTML gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt  x000D   lt title gt Example lt  title gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   lt div id  hello  gt  lt  div gt  x000D   lt script type   text javascript  gt  x000D      what    x000D      function what    x000D          document getElementById  hello   innerHTML     lt p gt hi lt  p gt    x000D         x000D   lt  script gt    x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You are almost certainly running your code before the DOM is constructed   Try running your code in a window onload handler function  but see note below    window onload   function            all of your code goes in here        it runs after the DOM is built     Another popular cross-browser solution is to put your  lt script gt  block just before the closing  lt  body gt  tag   This could be the best solution for you  depending on your needs    lt html gt     lt body gt        lt  -- all of your HTML goes here    -- gt        lt script gt             code in this final script element can use all of the DOM      lt  script gt     lt  body gt   lt  html gt     Note that window onload will wait until all images and subframes have loaded  which might be a long time after the DOM is built   You could also use document addEventListener  DOMContentLoaded   function         to avoid this problem  but this is not supported cross-browser   The bottom-of-body trick is both cross-browser and runs as soon as the DOM is complete

User · Answer

No doubt  most of the answers here are correct  but you can also do this   document addEventListener  DOMContentLoaded   function what        document getElementById  hello   innerHTML    hi

User · Answer

Javascript looks good  Try to run it after the the div has loaded  Try to run only when the document is ready    document  ready in jquery

User · Answer

The error is self-explaining it is not getting the HTML tag in which You want to set the Data So make tag available to JS then only You can set Data to that

User · Answer

Is this running in the  lt head gt  of the html  If so  you need to make sure the  lt body gt  tag has actually loaded first   You need to use an onload handler  for example  http   javascript about com library blonload htm

[javascript] Cannot set property 'innerHTML' of null

Examples related to javascript

Examples related to onload

Examples related to innerhtml