Hola a todos, hace unos días inicie un tema para que alguien me ayudara a crear una tabla con JavaScript, bien pues eso ya lo conseguí. Ahora lo que necesito es que las celdas de esa tabla cambien de color al hacer click sobre ellas, pero no me funciona.
Este es mi código HTML:
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body onload="crearTabla()">
<header></header>
<article>
<section id="butaca">
<p id="numsala"></p>
<p id="titulo"></p>
<table id="tabla" onclick="funcionTabla()"></table>
</section>
</article>
</body>
</html>
Y este es mi JavaScript
Código Javascript
:
Ver originalvar columna=new Array();
columna[0]=1;
columna[1]=2;
columna[2]=3;
columna[3]=4;
columna[4]=5;
columna[5]=6;
var filas=new Array();
filas[0]=1;
filas[1]=2;
filas[2]=3;
filas[3]=4;
filas[4]=5;
var tabla=new Array();
tabla[0]=columna;
tabla[1]=filas;
function crearTabla(){
var tbl = document.getElementById("tabla");
var tblBody = document.createElement("tbody");
for (var i = 0; i < columna.length; i++) {
var fila = document.createElement("tr");
for (var j = 0; j < filas.length; j++) {
var celda = document.createElement("td");
var textoCelda = document.createTextNode(i+"-"+j);
celda.appendChild(textoCelda);
fila.appendChild(celda);
}
tblBody.appendChild(fila);
}
tbl.appendChild(tblBody);
tbl.setAttribute("border", "2");
}
function funcionTabla(){
var td=document.getElementsByTagName('td');
td.addEventListener('click',cambiaColor,false);
}
function cambiaColor(e){
var asiento=e.target;
if(asiento.style.background=='green'){
asiento.style.background='orange';
}
else{
asiento.style.background='green';
}
}
El error me da en la función funcionTabla(), más concretamente en la segunda línea de la función. Por que me da este error y a que se debe y que posible solución puedo hacer.
Muchas gracias por la ayuda