1

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>

1
  • Creo que te falta declarar mostrarTabla1 y mostrarTabla2 y por eso te da el error.
    – Yusuf
    Commented el 19 jul. 2020 a las 5:09

2 respuestas 2

0

Encuentro básicamente 3 errores en tu código.

  1. Al construir la tabla, estas obviando las comillas del placeholder del input de cada celda. Este valor debe ir entre comillas. (esto no provoca el error, pero deja HTML mal formado y el resultado es indefinido y tiende a variar entre un navegador y otro).

  2. No pones comillas en el id de la tabla tampoco, y debiera tenerlas.

  3. Cuando transpones la tabla, estas tratando de acceder a la fila con el índice de las columnas y a la columna con el índice de la fila, además, tu contador inicia en uno, y los arreglos en javascript, que está basado en el lenguaje c inician en cero. Esto provoca que trates de obtener celdas que en realidad no existe, lo que devuelve el valor undefined, sobre el que luego intentas obtener el innerHTML, de allí el mensaje de error.

    El error se resuelve intercambiando las variables y restándole uno a su valor, aunque los programadores de c y de javascript tienden a hacer ciclos y contadores que también inician en cero para evitar esta resta (supongo que tu vienes de pascal u otro lenguaje donde la costumbre es iniciar los contadores en uno). Yo he dejado el contador basado en uno para no modificar más tu código.

He hecho un cambio adicional para mostrar el valor de cada celda en el botón y no dejar input's con id's duplicados. (aunque no es lo que has pedido, deja esa parte como la tenías para seguir tu camino).

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[j-1].cells[i-1].innerHTML;
                celda = document.getElementById('llenarTabla').rows[j-1].cells[i-1].childNodes[0].value;
                //console.log('celda: ' + celda);
                contenidoHTML+=`<button class=botonTabla2 value="${i}">${celda}</button>`
                //contenidoHTML+=celda;
                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>

1
  • Muchísimas gracias, me emociona saber que no estaba muy alejada de lo que esperaba con el programa, gracias por tu ayuda. Me funcionado perfectamente Commented el 19 jul. 2020 a las 16:26
0

Te faltan las comillas en esta linea:

    let contenidoHTML="<table border=1 id=llenarTabla>"

Debería estar asi:

    let contenidoHTML="<table border=1 id='llenarTabla' >"
1
  • Muchas gracias por tu sugerencia, lo aprecio mucho Commented el 19 jul. 2020 a las 16:24

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.