How do I solve this Cannot read property appendChild of null error

Question

I tried to use this code below  which adds buttons in slideshow on my site   window onload   function loadContIcons         var elem   document createElement  img        elem src    http   arno agnian com sites all themes agnian images up png       elem setAttribute  class    up icon         var id    views slideshow controls text next slideshow-block       if  id     0            document getElementById id  appendChild elem         else console log  aaaaa         var elem1   document createElement  img        elem1 src    http   arno agnian com sites all themes agnian images down png       elem1 setAttribute  class    down icon         var id1    views slideshow controls text previous slideshow-block       if  id1     0            document getElementById id1  appendChild elem1         else console log  aaaaa        On the front page  where I have slideshow everything works good  but on the other pages the error Cannot read property  appendChild  of null occurs

User · Accepted Answer

The element hasn t been appended yet  therefore it is equal to null  The Id will never   0  When you call getElementById id   it is null since it is not a part of the dom yet unless your static id is already on the DOM  Do a call through the console to see what it returns

User · Answer

Just reorder or make sure  the  DOM or HTML  is loaded before the JavaScript

User · Answer

Your condition id     0 will always be different that zero because you are assigning a string value  On pages where the element with id views slideshow controls text next slideshow-block is not found  you will still try to append the img element  which causes the Cannot read property  appendChild  of null error   Instead of assigning a string value  you can assign the DOM element and verify if it exists within the page   window onload   function loadContIcons         var elem   document createElement  img        elem src    http   arno agnian com sites all themes agnian images up png       elem setAttribute  class    up icon         var container   document getElementById  views slideshow controls text next slideshow-block        if  container     null            container appendChild elem         else console log  aaaaa         var elem1   document createElement  img        elem1 src    http   arno agnian com sites all themes agnian images down png       elem1 setAttribute  class    down icon         container   document getElementById  views slideshow controls text previous slideshow-block        if  container     null            container appendChild elem1         else console log  aaaaa

User · Answer

For all those facing a similar issue  I came across this same issue when i was trying to run a particular code snippet  shown below    lt html gt       lt head gt           lt script gt                  var div  container   document getElementById  container                   for var i 0 i lt 5 i                         div   document createElement  div                        div onclick   function                              alert  This is a box    i                                              container appendChild div                                  lt  script gt        lt  head gt       lt body gt           lt div id  container  gt  lt  div gt       lt  body gt    lt  html gt    https   codepen io pcwanderer pen MMEREr  Looking at the error in the console for the above code   Since the document getElementById is returning a null and as null does not have a attribute named appendChild  therefore a error is thrown  To solve the issue see the code below    lt html gt       lt head gt           lt style gt           container              height  200px              width  700px              background-color  red              margin  10px                      div              height  100px              width  100px              background-color  purple              margin  20px              display  inline-block                     lt  style gt       lt  head gt       lt body gt           lt div id  container  gt  lt  div gt           lt script gt                  var div  container   document getElementById  container                   for let i 0 i lt 5 i                         div   document createElement  div                        div onclick   function                              alert  This is a box    i                                              container appendChild div                                  lt  script gt       lt  body gt   lt  html gt    https   codepen io pcwanderer pen pXWBQL  I hope this helps

[javascript] How do I solve this "Cannot read property 'appendChild' of null" error?

Examples related to javascript

Examples related to jquery

Examples related to drupal