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.

I don't understand how that error message doesn't clearly communicate the problem. You'll get that error whenever one of those `getElementById()` calls returns `null`. — Pointy, Jul 30 '14 at 13:37
Also, those tests for "id" and "id1" being not equal to zero immediately after setting them to one of those long strings make no sense. — Pointy, Jul 30 '14 at 13:37
Instead of checking to see if `id !== 0`, which will never be false, check to see that `document.getElementById()` returns something? — Jason P, Jul 30 '14 at 13:37

score 20 · Accepted Answer · edited Nov 21 '18 at 19:28

20

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.

edited Nov 21 '18 at 19:28

card100

76
1
7

answered Jul 30 '14 at 13:37

eg_dac

701
4
14

thanks eg_dac, I went like this `var k = document.getElementById("views_slideshow_controls_text_previous_slideshow-block"); if(k != null) k.appendChild(elem1);` – Arno Jul 30 '14 at 14:38
3

another safety check is if(typeof k !=="undefined") – eg_dac Jul 30 '14 at 14:55

Arun Prasad E S · Answer 2 · 2019-12-15T04:04:34.520

11

Just reorder or make sure, the (DOM or HTML) is loaded before the JavaScript.

edited Dec 15 '19 at 04:04

answered Oct 23 '17 at 06:41

Arun Prasad E S

9,489
8
74
87

score 2 · Answer 3 · answered Jul 30 '14 at 14:37

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");
}

score 1 · Answer 4 · answered Jun 27 '19 at 03:53

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>

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.

<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>

https://codepen.io/pcwanderer/pen/pXWBQL

I hope this helps. :)

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

4 Answers4

Linked