0

Mal funcionamiento o mala sintaxis del evento "onclick" sobre elementos del HTML creados en una función del DOM.

¿A qué se debe este error?

animales.js:70 Uncaught TypeError: Cannot set property 'onclick' of null

La línea 70 es la siguiente:

document.getElementById("cerdo").onclick = sonidoCerdo;

Código completo.

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Animales!</title>
        <link rel="stylesheet" href="style/estilo.css"/>
        <script type="text/JavaScript" src="js/animales.js"></script>
    </head>

    <body>

    </body>
</html>

Código Javascript/DOM:

/*Exclusivamente usar funciones DOM.*/

/*Registro un evento para cuando termine de cargarse el documento se cargen los eventos necesarios.*/
window.onload = crearTabla;

/*Array donde estan definidos los nombres de los animales.*/
var animales = ["cerdo", "gato", "perro", "vaca"];

/*Exclusivamente con DOM, crear una tabla 2x2 (4 elementos-casillas).*/
function crearTabla() {
    //Obtener la referencia del elemento body.
    var body = document.getElementsByTagName("body")[0];

    //Creamos el elemento/objeto que deseamos: <div>.
    var div = document.createElement("div");
    //Asignamos un id al div creado.
    div.setAttribute("id", "animales");
    //Agregamos al body el div.
    body.appendChild(div);

    //Crea un elemento <table> y un elemento <tbody>.
    var tabla = document.createElement("table");
    var tblBody = document.createElement("tbody");

    //Crea las celdas. 
    var contador = 0;
    for (var i=0; i<2; i++) {
        var hilera = document.createElement("tr"); 
        for (var j=0; j<2; j++) {
            //Creamos el elemento <td> por cada celda.
            var celda = document.createElement("td");
            //Creamos el elemento <img> al cual asociamos el atributo de la ruta de la imagen.
            var imagenAnimal = document.createElement("img");
            imagenAnimal.setAttribute("src", "./images/"+animales[contador]+".png");    
            //Creamos el elemento <audio> al cual asociamos un elemento <source>.
            var audioAnimal = document.createElement("audio");
            var sourceAnimal = document.createElement("source");
            sourceAnimal.setAttribute("src", "./sounds/"+animales[contador]+".wav");
            sourceAnimal.setAttribute("type", "audio/wav");
            //Al audioAnimal le añadimos el sourceAnimal.
            audioAnimal.appendChild(sourceAnimal);
            //Creamos el elemento <div> para cada animal al cual asociamos un id y una clase.
            var divAnimal = document.createElement("div"); 
            divAnimal.setAttribute("id", animales[contador]);           
            divAnimal.setAttribute("class", "animal");
            //Al divAnimal le añadimos la imagen del animal.
            divAnimal.appendChild(imagenAnimal);
            //A la celda le añadimos el divAnimal.
            celda.appendChild(divAnimal); 
            //A la hilera "tr" le añadimos la celda "td".
            hilera.appendChild(celda);
            contador++;
        } 
        //Agrega la hilera al final de la tabla (al final del elemento tblbody). 
        tblBody.appendChild(hilera); 
    }

    //Posiciona el <tbody> debajo del elemento <table>.
    tabla.appendChild(tblBody);
    //appends <table> into <body>.
    div.appendChild(tabla);
    //Modifica el atributo "border" de la tabla y lo fija a "2";
    tabla.setAttribute("border", "2");
}


/*Función para lanzar el sonido del cerdo.*/
function sonidoCerdo() {
    alert('CERDO');
}
//Asignar la función externa al elemento con id=cerdo.
document.getElementById("cerdo").onclick = sonidoCerdo;


/*Función para lanzar el sonido del cerdo.*/
function sonidoGato() {
    alert('GATO');
}
//Asignar la función externa al elemento con id=gato.
document.getElementById("gato").onclick = sonidoGato;


/*Función para lanzar el sonido del perro.*/
function sonidoPerro() {
    alert('PERRO');
}
//Asignar la función externa al elemento con id=perro.
document.getElementById("perro").onclick = sonidoPerro;


/*Función para lanzar el sonido del vaca.*/
function sonidoVaca() {
    alert('VACA');
}
//Asignar la función externa al elemento con id=vaca.
document.getElementById("vaca").onclick = sonidoVaca;
0

1 respuesta 1

1

Te recomendaria que hicieras

window.onload = function(){
    crearTabla();
    function sonidoCerdo() {
       alert('CERDO');
    }
    //Asignar la función externa al elemento con id=cerdo.
    document.getElementById("cerdo").onclick = sonidoCerdo;
}

De esta manera, se cargara el elemento y luego se le asignara la funcion, recuerda que todo codigo Javascript debe ejecutarse despues de cargar el DOM.

5
  • 1
    De acuerdo sí, es una opción englobarlo todo al recargar la página aunque los eventos no harían falta pero sí sería una buena práctica. Lo modifico ahora mismo.
    – omaza1990
    Commented el 31 may. 2017 a las 13:35
  • 1
    ¿Entonces se debía a que intentaba acceder al elemento id=cerdo sin estar creado previamente, debido a que ejecutaba después crearTabla? Qué extraño: debido a que puse window.onload=crearTabla;
    – omaza1990
    Commented el 31 may. 2017 a las 13:41
  • Si, sin embargo, las funciones estaban declaradas fuera del onload, el proceso de ejecución seguia su curso y probablemente no estaba creado aun, podrias debugear dejando tu codigo tal como estaba e imprimir document.getElementById("cerdo")
    – sioesi
    Commented el 31 may. 2017 a las 13:43
  • Haré un console.log(cerdo) donde var cerdo=document.getElementById("cerdo");
    – omaza1990
    Commented el 31 may. 2017 a las 13:44
  • Gracias por la aclaración.
    – omaza1990
    Commented el 31 may. 2017 a las 14:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.