• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

157
Views
Problema de Javascript .createElement y .appendChild (incluye para y si)

Soy un usuario de javascript bastante novato. Necesito ayuda para depurar este código. Lo que intento hacer con esto se basa en la cantidad de valores en la lista, es crear una tabla de 3 columnas de ancho para mostrar cada uno. Por cierto, todo el formato html está configurado con cuadrícula.

El error es: TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'appendChild')

HTML (cuerpo interior):

 <section id="db_gallery"> <table id="gallery_table"></table> <script src="autogallery.js"></script> </section>

JS en autogallery.js:

 const gallery_table = document.getElementById("gallery_table"); const list = ["A", "B", "C", "D", "E", "F"]; for (let i of list) { if (i % 3 === 0) { let newRowItem = document.createElement("tr"); var idName = "newRowItem"; idName.concat(i); newRowItem.setAttribute("id", idName); gallery_table.appendChild(newRowItem); } let newColItem = document.createElement('th'); newColItem.textContent = i; idName.appendChild(newColItem); console.log(idName); }

También sería de gran ayuda si alguna sugerencia fuera fácil de entender. Si significa algo, eventualmente vincularé esto a una base de datos phpmyadmin como los valores en la matriz. ¡Gracias!

about 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Primero debe newRowItem.appendChild en lugar de idName porque newRowItem es el elemento que ha creado.

Y en segundo lugar, cuando se usa for...of i es el elemento, no el índice, por lo que es mejor usar for en su caso.

Y por último, no debe usar newRowItem fuera del alcance porque lo declaró con let inside if caluse.

esto debería ser correcto:

 const gallery_table = document.getElementById("gallery_table"); let list = ["A", "B", "C", "D", "E", "F"]; var idName = ""; for (let i = 0; i < list.length; i++) { if (i % 3 === 0) { let newRowItem = document.createElement("tr"); idName = "newRowItem"; idName = idName.concat(list[i]); newRowItem.setAttribute("id", idName); gallery_table.appendChild(newRowItem); let newColItem = document.createElement('th'); newColItem.textContent = list[i]; newRowItem.appendChild(newColItem); } }
about 3 years ago · Juan Pablo Isaza Report

0

Probar

 newRowItem.appendChild(newColItem)

en vez de

 idName.appendChild(newColItem)
about 3 years ago · Juan Pablo Isaza Report

0

Use for loop con índice para hacer una operación de módulo en los índices de la lista.

 let newRowItem; for (int i=0 ; i<list.length; i++) { if (i % 3 === 0) { newRowItem = document.createElement("tr"); var idName = "newRowItem"; idName.concat(i); newRowItem.setAttribute("id", idName); gallery_table.appendChild(newRowItem); } if(newRowItem){ let tag = i < 3 ? 'th' : 'td'; let newColItem = document.createElement(tag); newColItem.textContent = list[i]; newRowItem.appendChild(newColItem); console.log(newRowItem); } }`
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error