![]() |
How do I solve this "Cannot read property 'appendChild' of null" error? - Printable Version +- 0Day Forums (https://0day.red) +-- Forum: Coding (https://0day.red/Forum-Coding) +--- Forum: CMS (https://0day.red/Forum-CMS) +---- Forum: Drupal (https://0day.red/Forum-Drupal) +---- Thread: How do I solve this "Cannot read property 'appendChild' of null" error? (/Thread-How-do-I-solve-this-quot-Cannot-read-property-39-appendChild-39-of-null-quot-error) |
How do I solve this "Cannot read property 'appendChild' of null" error? - empjvfpbhy - 07-26-2023 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. RE: How do I solve this "Cannot read property 'appendChild' of null" error? - timothyspqpwko - 07-26-2023 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"); } RE: How do I solve this "Cannot read property 'appendChild' of null" error? - stork93161 - 07-26-2023 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. RE: How do I solve this "Cannot read property 'appendChild' of null" error? - Protamarahj - 07-26-2023 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. <html> <head> <script> var div, container = document.getElementById("container") for(var i=0;i<5;i++){ div = document.createElement("div"); div.onclick = function() { alert("This is a box #"+i); }; container.appendChild(div); } </script> </head> <body> <div id="container"></div> </body> </html> [Looking at the error in the console for the above code.][1] [1]: 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. <html> <head> <style> #container{ height: 200px; width: 700px; background-color: red; margin: 10px; } div{ height: 100px; width: 100px; background-color: purple; margin: 20px; display: inline-block; } </style> </head> <body> <div id="container"></div> <script> var div, container = document.getElementById("container") for(let i=0;i<5;i++){ div = document.createElement("div"); div.onclick = function() { alert("This is a box #"+i); }; container.appendChild(div); } </script> </body> </html> I hope this helps. :) RE: How do I solve this "Cannot read property 'appendChild' of null" error? - Eduardo618852 - 07-26-2023 Just reorder or make sure, the (DOM or HTML) is loaded before the JavaScript. |