Tengo el siguiente código html:

<!DOCTYPE html>
<html>
<head>
<script>
    var array = ["one", "two", "three", "four"];
    for(i = 0; i<array.length; i++){
        alert(array[i]);
        var tmp = document.getElementById(array[i]);
        alert(tmp.id);
        alert(tmp.innerHTML);
        var to_append = tmp.innerHTML;
        array_inc.push(to_append);
        alert(array_inc);
        console.log(array_inc);
    }
</script>
</head>
<body>
    <div id = "one">1</div>
    <div id = "two">2</div>
    <div id = "three">3</div>
    <div id = "four">4</div>
</body>
</html>

Sin embargo, en la consola, estoy recibiendo un error cuando llega a la línea 9, cuando dice «tipo de null no existe», pero claramente el id del div debe existir porque yo lo tenía declarado como una identificación en el cuerpo. ¿Cómo es esto posible?

  • Nunca inicializar array_inc, tal vez quisiste escribir array?

3 Comentarios

  1. 3

    Sus elementos html no se carga cuando el script se carga y por lo tanto no existe en el momento en que el código javascript se ejecuta. Cambiar el orden de tu código va a resolver el problema:

    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
        <div id = "one">1</div>
        <div id = "two">2</div>
        <div id = "three">3</div>
        <div id = "four">4</div>
    <script>
        var array = ["one", "two", "three", "four"];
        for(i = 0; i<array.length; i++){
            alert(array[i]);
            var tmp = document.getElementById(array[i]);
            alert(tmp.id);
            alert(tmp.innerHTML);
            var to_append = tmp.innerHTML;
            array_inc.push(to_append);
            alert(array_inc);
            console.log(array_inc);
        }
    </script>
    </body>
    </html>
  2. 2

    Su código JS es probablemente que se ejecutan antes de que el código HTML se ha procesado completamente. Para evitar esto, no ejecutar su código hasta que el ‘DOMContentLoaded’ evento ha despedido.

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            //your code here
        });
    </script>

Dejar respuesta

Please enter your comment!
Please enter your name here