我如何解决这个问题"无法阅读财产" appendChild' of null"错误?

时间:2014-07-30 13:33:11

标签: javascript jquery drupal

我尝试使用下面的代码,在我的网站上添加幻灯片中的按钮:

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

4 个答案:

答案 0 :(得分:16)

该元素尚未附加,因此它等于null。 Id永远不会= 0.当你调用getElementById(id)时,它是null,因为它不是dom的一部分,除非你的静态id已经在DOM上了。通过控制台进行呼叫以查看它返回的内容。

答案 1 :(得分:4)

只需重新排序或确保在JavaScript之前加载DOM或HTML。

答案 2 :(得分:2)

您的条件id !== 0将始终与零不同,因为您正在分配字符串值。在找不到标识为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");
}

答案 3 :(得分:0)

对于所有面临类似问题的人,当我尝试运行特定的代码段时,我都遇到了同样的问题,如下所示。

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

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

我希望这会有所帮助。 :)