wake-up-neo.com

Wie löse ich den Fehler "Die Eigenschaft 'appendChild' von null kann nicht gelesen werden"?

Ich habe versucht, diesen Code unten zu verwenden, der Schaltflächen in der Diashow auf meiner Website hinzufügt:

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

Auf der Titelseite, wo ich Diashow habe, funktioniert alles gut, aber auf den anderen Seiten der Fehler Cannot read property 'appendChild' of null tritt ein.

15
Arno

Das Element wurde noch nicht angehängt, daher ist es gleich null. Die ID wird niemals = 0. Wenn Sie getElementById (id) aufrufen, ist sie null, da sie noch nicht Teil des Doms ist, es sei denn, Ihre statische ID befindet sich bereits im DOM. Rufen Sie über die Konsole an, um zu sehen, was zurückgegeben wird.

16
eg_dac

Einfach neu anordnen oder sicherstellen, dass das DOM oder HTML vor dem JavaScript geladen wird.

4
Arun Prasad E S

Ihr Zustand id !== 0 unterscheidet sich immer von Null, da Sie einen Zeichenfolgenwert zuweisen. Auf Seiten, auf denen das Element mit der ID views_slideshow_controls_text_next_slideshow-block nicht gefunden wird, werden Sie immer noch versuchen, das img-Element anzuhängen, wodurch das Cannot read property 'appendChild' of null Error.

Anstatt einen Zeichenfolgenwert zuzuweisen, können Sie das DOM-Element zuweisen und überprüfen, ob es auf der Seite vorhanden ist.

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

Bei allen, die mit einem ähnlichen Problem konfrontiert waren, stieß ich auf dasselbe Problem, als ich versuchte, ein bestimmtes Code-Snippet auszuführen (siehe unten).

<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

Betrachtet man den Fehler in der Konsole für den obigen Code.

Da document.getElementById eine Null zurückgibt und als Null kein Attribut mit dem Namen appendChild hat, wird ein Fehler ausgelöst. Um das Problem zu lösen, lesen Sie den folgenden Code.

<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

Ich hoffe das hilft. :)

1
pcwanderer