I am a pretty novice javascript user. I need some help debugging this code. What I intend this to do is based on the amount of values in the list, is create a 3 column wide table to display each. BTW the whole html formatting is set up with grid.
The error is: Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')
HTML (inside body):
<section id="db_gallery">
<table id="gallery_table"></table>
<script src="autogallery.js"></script>
</section>
JS in 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);
}
Also it would be a big help if any suggestions were simple to understand. If it means anything I will eventually be linking this to a phpmyadmin database as the values in the array. Thanks!
CodePudding user response:
First you should newRowItem.appendChild
instead of idName
because newRowItem
is the element you've created.
And second when using for...of
i
is the element not the index, so it's better to use for
in your case.
And last you shouldn't use newRowItem
outside the scope because you declared it with let
inside if
caluse.
this should be correct:
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);
}
}
CodePudding user response:
Try
gallery_table.appendChild(newColItem)
instead of
idName.appendChild(newColItem)
CodePudding user response:
Use for loop with index to do modulo operation on list indexes.
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);
}
}`