Javascript 我该如何解决这个问题；无法读取属性'；追加儿童'；“无效”的定义；错误？_Javascript_Jquery_Drupal

Javascript 我该如何解决这个问题；无法读取属性'；追加儿童'；“无效”的定义；错误？

javascript jquery drupal

Javascript 我该如何解决这个问题；无法读取属性'；追加儿童'；“无效”的定义；错误？,javascript,jquery,drupal,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

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

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

在首页，我用幻灯片演示了一切，但在其他页面，出现了错误

无法读取null的属性'appendChild'。元素还没有被追加，因此它等于null。Id将永远不会=0。调用getElementById（id）时，它为null，因为它还不是dom的一部分，除非您的静态id已经在dom上。通过控制台调用以查看返回的内容。
您的状况id！==0将始终与0不同，因为您正在分配字符串值。在找不到id为视图\u slideshow\u控件\u文本\u next\u slideshow-block
的元素的页面上，您仍将尝试附加img元素，这会导致无法读取null的属性“appendChild”
错误
您可以指定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");
}

只需重新排序或确保（DOM或HTML）在JavaScript之前加载。
对于所有面临类似问题的人，我在尝试运行特定代码段时遇到了相同的问题，如下所示
<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>


var div，container=document.getElementById（“container”）
对于（var i=0；我能发布你的站点代码吗？我不明白错误消息如何不能清楚地传达问题。每当那些getElementById（）
调用中的一个返回null
。使用chrom-dev工具和断点进行调试。还有，那些针对“id”和“id1”的测试将它们设置为其中一个长字符串后立即不等于零是没有意义的。与其检查id！==0
，这永远不会是错误的，不如检查document.getElementById（）
返回什么？谢谢，例如dac，我是这样做的var k=document.getElementById(“视图\u幻灯片放映\u控件\u文本\u上一个\u幻灯片放映块”）；if（k！=null）k.appendChild（elem1）；另一个安全检查是if（k！=“未定义”）
<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>