web-dev-qa-db-ja.com

この「nullのプロパティ 'appendChild'を読み取れません」エラーを解決するにはどうすればよいですか？

私のサイトのスライドショーにボタンを追加するこのコードを使用しようとしました：

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が発生します。

javascriptjquerydrupal
15
Arno

要素はまだ追加されていないため、nullと等しくなります。 Idは決して0になりません。getElementById（id）を呼び出すと、静的IDがすでにDOM上にない限り、domの一部ではないため、nullになります。コンソールを介して呼び出しを行い、返される内容を確認します。

16
eg_dac

DOMまたはHTMLがJavaScriptの前に読み込まれることを確認するだけです。

4
Arun Prasad E S

あなたの状態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");
}
2
Mike Vranckx

同様の問題に直面しているすべての人について、以下に示す特定のコードスニペットを実行しようとしたときに、同じ問題に遭遇しました。

<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

これがお役に立てば幸いです。 :)

1
pcwanderer