Javascript .createElement & .appendChild Issue (Includes for and if)

Question

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!

Answer 1

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);
        }
    }

Answer 2

Try

newRowItem.appendChild(newColItem)

instead of

idName.appendChild(newColItem)

Answer 3

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);
        }
   }`