web-dev-qa-db-fra.com

Comment puis-je résoudre cette erreur «Impossible de lire la propriété« appendChild »de null»?

J'ai essayé d'utiliser ce code ci-dessous, qui ajoute des boutons en diaporama sur mon site:

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

Sur la première page, où j'ai un diaporama, tout fonctionne bien, mais sur les autres pages, l'erreur Cannot read property 'appendChild' of null se produit.

javascriptjquerydrupal
15
Arno

L'élément n'a pas encore été ajouté, il est donc égal à null. L'ID ne sera jamais = 0. Lorsque vous appelez getElementById (id), il est nul car il ne fait pas encore partie du dom à moins que votre id statique ne soit déjà sur le DOM. Faites un appel via la console pour voir ce qu'elle retourne.

16
eg_dac

Réorganisez ou assurez-vous simplement que le DOM ou le HTML est chargé avant le JavaScript.

4
Arun Prasad E S

Votre état id !== 0 sera toujours différent de zéro car vous affectez une valeur de chaîne. Sur les pages où l'élément portant l'ID views_slideshow_controls_text_next_slideshow-block est introuvable, vous essaierez toujours d'ajouter l'élément img, ce qui provoque le Cannot read property 'appendChild' of null Erreur.

Au lieu d'attribuer une valeur de chaîne, vous pouvez affecter l'élément DOM et vérifier s'il existe dans la page.

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

Pour tous ceux confrontés à un problème similaire, je suis tombé sur ce même problème lorsque j'essayais d'exécuter un extrait de code particulier, illustré ci-dessous.

<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

En regardant l'erreur dans la console pour le code ci-dessus.

Étant donné que le document.getElementById renvoie une valeur null et que null n'a pas d'attribut nommé appendChild, une erreur est donc générée. Pour résoudre le problème, consultez le code ci-dessous.

<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

J'espère que ça aide. :)

1
pcwanderer