Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

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

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!

7 months ago · Juan Pablo Isaza
3 answers
Answer question

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);
        }
    }
7 months ago · Juan Pablo Isaza Report

0

Try

newRowItem.appendChild(newColItem)

instead of

idName.appendChild(newColItem)
7 months ago · Juan Pablo Isaza Report

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);
        }
   }`
7 months 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 job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.