Question 63686 in PhpMyAdmin Question posted in
The official documentation can be found here.

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

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!

Tags:

3

Answers


  1. 0

    Try

    newRowItem.appendChild(newColItem)

    instead of

    idName.appendChild(newColItem)
    Login or Signup to reply.
  2. 0

    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);
        }
    }
    Login or Signup to reply.
  3. 0

    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);
        }
   }`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search