Can't create a table using JS

Question

Here is an error:

Uncaught TypeError: Cannot read property 'appendChild' of null

The example of code:

function MakeTable(Matrix){
    var newElem = document.createElement('table');
    newElem.border = "1px";
    for(var j = 0; j < Matrix.length; j++) {
        var newRow = newElem.insertRow(j);
        for(var n = 0; n < Matrix[j].length; n++) {
            var newCell = newRow.insertCell(n);
            newCell.innerText = Matrix[j][n];
        }
    }

    document.getElementById('table1').appendChild(newElem);
}

Seems pretty clear that your table1 element isn't found in the DOM. — six fingered man
– six fingered man, Commented May 23, 2015 at 17:53
<body> <div> <h1>Дана матриця:</h1> <p> 1-A -1 1 -1 </p> <p> 1 -1 1 -1 </p> <p> 1 -1 0 0 </p> <p> 1 0 0 1 </p> Де А = 10^K, K = 12; </div> <div id="table1"> </div> </body> — Alexander Bondarenko
– Alexander Bondarenko, Commented May 23, 2015 at 17:55
If the script is in the <head> and it isn't using a delay to make sure it doesn't run when until the DOM is loaded, then it'll run before the element exists. Move your script to just before the closing </body> tag. — six fingered man
– six fingered man, Commented May 23, 2015 at 17:57
What is the param Matrix you are passing through to MakeTable()? An object, array etc? — Michael Wilson
– Michael Wilson, Commented May 23, 2015 at 17:58

six fingered man · Accepted Answer · 2015-05-23 17:56:01Z

1

As long as you have an element with the table1 ID in the DOM and as long as the script doesn't run before that element is loaded, it will work.

function MakeTable(Matrix){
    var newElem = document.createElement('table');
    newElem.border = "1px";
    for(var j = 0; j < Matrix.length; j++) {
        var newRow = newElem.insertRow(j);
        for(var n = 0; n < Matrix[j].length; n++) {
            var newCell = newRow.insertCell(n);
            newCell.textContent = Matrix[j][n];
        }
    }

    document.getElementById('table1').appendChild(newElem);
}

MakeTable([["this", "is"], ["my", "table"]]);

<div id=table1></div>

I also changed .innerText to .textContent since that's the standards compliant way to set text.

answered May 23, 2015 at 17:56

six fingered man

2,50016 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2015-05-23 18:52:31Z

1

If you create an element, you have to append it. Here:

document.body.appendChild(table)

Change the last line:

function MakeTable(Matrix){
    var newElem = document.createElement('table');
    newElem.border = "1px";
    for(var j = 0; j < Matrix.length; j++) {
        var newRow = newElem.insertRow(j);
        for(var n = 0; n < Matrix[j].length; n++) {
            var newCell = newRow.insertCell(n);
            newCell.innerText = Matrix[j][n];
        }
    }
    document.body.appendChild(newElem);
}

By convention you write the first letter of a function name in lower case (except class name).

Demo

edited May 23, 2015 at 18:52

answered May 23, 2015 at 18:46

user3589620

Comments

Alexander Bondarenko · Accepted Answer · 2015-05-23 18:03:31Z

0

It returned out that I linked script not in the body, but in the head)

answered May 23, 2015 at 18:03

Alexander Bondarenko

2071 silver badge9 bronze badges

Collectives™ on Stack Overflow

Can't create a table using JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related