Как решить эту ошибку "Невозможно прочитать свойство" appendChild "null"?

Я попытался использовать этот код ниже, который добавляет кнопки в слайд-шоу на моем сайте:

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

На первой странице, где у меня есть слайд-шоу, все работает хорошо, но на других страницах появляется ошибка Cannot read property 'appendChild' of null.

Ответ 1

Элемент еще не был добавлен, поэтому он равен нулю. Идентификатор никогда не будет = 0. Когда вы вызываете getElementById (id), он имеет значение null, поскольку он еще не является частью dom, если ваш статический идентификатор уже не находится в DOM. Сделайте вызов через консоль, чтобы увидеть, что он возвращает.

Ответ 2

Просто измените порядок или убедитесь, что DOM или HTML загружается до JavaScript.

Ответ 3

Ваше условие id !== 0 всегда будет отличаться от нуля, потому что вы назначаете строковое значение. На страницах, где элемент с id views_slideshow_controls_text_next_slideshow-block не найден, вы все равно попытаетесь добавить элемент img, что вызывает ошибку Cannot read property 'appendChild' of null.

Вместо назначения строкового значения вы можете назначить элемент DOM и проверить, существует ли он на странице.

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

Ответ 4

Для всех, кто сталкивался с подобной проблемой, я сталкивался с этой же проблемой, когда пытался запустить определенный фрагмент кода, показанный ниже.

<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

Глядя на ошибку в консоли для приведенного выше кода.

Поскольку document.getElementById возвращает значение NULL и, поскольку NULL не имеет атрибута с именем appendChild, возникает ошибка. Чтобы решить проблему, используйте код ниже.

<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

Надеюсь, это поможет. :)