Question

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

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。

Answer 1

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

Answer 2

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

Answer 3

您的条件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");
}

Answer 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

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

我希望这会有所帮助。：）

我如何解决这个问题＆＃34;无法阅读财产＆quot; appendChild＆＃39; of null＆＃34;错误？

4 个答案: