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!
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); } }Probar
newRowItem.appendChild(newColItem)en vez de
idName.appendChild(newColItem)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); } }`