Malfunction or bad syntax of the "onclick" event on HTML elements created in a DOM function.
Why is this error?
animales.js:70 Uncaught TypeError: Cannot set property 'onclick' of null
Line 70 is the following:
document.getElementById("cerdo").onclick = sonidoCerdo;
Full code.
HTML Code:
<!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>
Javascript Code / 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;