Tengo un problema con mi código; me salta ese mensaje de error y quería saber si aquí podían ayudarme. Adjunto el código en jvascript y HTML. Soy algo nueva con JavaScript. El error estaba indicado en esta linea; lo que quiero hacer es que los elementos que el usuario ingresa en el input de la tabla 1 se muestren en los botones de la tabla 2, la cual posee número de filas y columnas contrarias a la tabla 1
celda=document.getElementById('llenarTabla').rows[i].cells[j].innerHTML
window.addEventListener('load',function(){
//VALIDAR FILAS
txtFilas.addEventListener('blur',function()
{
mensajeTabla.innerHTML=""
if(txtFilas.value<=0 || txtFilas.value>5)
{
mensajeTabla.innerHTML+="Ingrese un valor entre 1 y 5"
}
})
//VALIDAR COLUMNAS
txtColumnas.addEventListener('blur',function()
{
mensajeTabla.innerHTML=""
if(txtColumnas.value<=0 || txtColumnas.value>5){
mensajeTabla.innerHTML+="Ingrese un valor entre 1 y 5"
}
})
//GENERAR TABLA1
btnGenerar1.addEventListener('click',function(){
numeroF=txtFilas.value
numeroC=txtColumnas.value
contador=0
let contenidoHTML="<table border=1 id=llenarTabla>"
for(let i=0;i<numeroF;i++)
{
contenidoHTML+="<tr>"
for(let j=0;j<numeroC;j++)
{
contenidoHTML+="<td>"
contenidoHTML+=`<input placeholder=Ingrese un número id="id${++contador}"></input>`
contenidoHTML+="</td>"
}
contenidoHTML+="</tr>"
}
contenidoHTML+="</table>"
mostrarTabla1.innerHTML=contenidoHTML;
})
//GENERAR TABLA 2
btnGenerar2.addEventListener('click',function(){
numeroF=txtFilas.value
numeroC=txtColumnas.value
let contenidoHTML="<table border=1>"
for(let i=1;i<=numeroC;i++)
{
contenidoHTML+="<tr>"
for(let j=1;j<=numeroF;j++)
{
contenidoHTML+="<td>"
celda=document.getElementById('llenarTabla').rows[i].cells[j].innerHTML
contenidoHTML+=`<button class=botonTabla2 value="${i}" >${celda}" </button>`
contenidoHTML+="</td>"
}
contenidoHTML+="</tr>"
}
contenidoHTML+="</table>"
mostrarTabla2.innerHTML=contenidoHTML;
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<script src="./javaScript/generacionDOM.js"></script>
<title>Inicio</title>
</head>
<body>
<section class="contenedor">
<section class="tabla1">
<label for="txtFilas">N. Filas</label>
<input type="text" id="txtFilas">
<label for="txtcolumnas">N. Columnas</label>
<input type="text" id="txtColumnas">
<div id="mensajeTabla"></div>
<button id="btnGenerar1">Llenar Tabla</button>
<div id="mostrarTabla1"></div>
</section>
<section class="tabla2">
<button id="btnGenerar2">Girar 45%</button>
<div id="mostrarTabla2"></div>
</section>
</section>
</body>
</html>