TypeError document.getElementByID() ... is null?

Question

Can anyone tell me why I might be getting this error?

"TypeError: document.getElementById(...) is null @ line:25"

I am using JavaScript and this is what I have so far inside my <script> tags...

var initBoard = new Array(new Array(0, 0, 0, 1),
                      new Array(0, 0, 0, 0),
                      new Array(3, 0, 0, 0),
                      new Array(0, 0, 2, 0)
);

function insertData(){
for(var i = 0; i < 4; i++){
    for(var j = 0; j <4; j++){
        document.getElementById(i.j).innerHTML = initBoard[i][j];

    }
}
}

Below that inside my HTML <body> I have this....

<table border="2" >
<tr align="center">
<td><div id="00">0</div></td>
<td><div id="01">0</div></td>
<td><div id="02">0</div></td>
<td><div id="03">0</div></td>
</tr>

<tr align="center">
<td><div id="10">0</div></td>
<td><div id="11">0</div></td>
<td><div id="12">0</div></td>
<td><div id="13">0</div></td>
</tr>

<tr align="center">
<td><div id="20">0</div></td>
<td><div id="21">0</div></td>
<td><div id="22">0</div></td>
<td><div id="23">0</div></td>
</tr>

<tr align="center">
<td><div id="30">0</div></td>
<td><div id="31">0</div></td>
<td><div id="32">0</div></td>
<td><div id="33">0</div></td>
</tr>

When I try and run this I get that error from above.

I have also tried to just hardcode the "ID" as '00' or '01' and it still gives me the same error message.

Does anyone know what I am doing wrong? I have looked all over the place and everywhere says basically the same thing and it should be easy, but I cannot get past this.

EDIT: Line 25 is document.getElementById(i.j).innerHTML = initBoard[i][j];

In addition to the answers below, make sure you run all of this in an onload handler. If run too early, the ids are not yet defined. — DrC
– DrC, Commented Dec 7, 2012 at 23:50
@DrC: Makes a good point. Nothing will be found if the code runs before the elements have been rendered. — I Hate Lazy
– I Hate Lazy, Commented Dec 7, 2012 at 23:55
@DrC I think this might be happening, because even with the answers below and me hardcoding in the ID's rather than using i.j I still get the same thing. I can I do this? — Michael Staudt
– Michael Staudt, Commented Dec 8, 2012 at 0:09

I Hate Lazy · Accepted Answer · 2012-12-07 23:46:30Z

3

You want to convert the numbers to strings and concatenate them.

document.getElementById(i + "" + j).innerHTML = ...

You had i.j, which would take the number referenced by i, and ask it for its j property, which would return undefined.

answered Dec 7, 2012 at 23:46

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

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

Comments

Joseph Caruana · Accepted Answer · 2012-12-07 23:49:02Z

2

Yeah - same issue happened to me once. The problem is that:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

So you'll have to replace your way of assigning IDs

Also - your approach of i.j is not correct

answered Dec 7, 2012 at 23:49

Joseph Caruana

2,2813 gold badges31 silver badges54 bronze badges

2 Comments

I Hate Lazy Over a year ago

While it's true that HTML 4 doesn't allow IDs that start with a number, HTML5 does allow it. Even in old browsers that don't support HTML5, the DOM selection may still work.

Joseph Caruana Over a year ago

didn't know about that the html 5 thing - thanks. I did have an issue once with that approach of using ids though but maybe I was doing something more complex involving perhaps jquery.

DrC · Accepted Answer · 2012-12-08 00:15:29Z

2

Make sure the code executes after the document is fully loaded. Something like

window.addEventListener("load", function() {
     <your current code>
},0);

As the other posters said, using something like "cell"+i+"_"+j is also a good idea. I'd put the underscore in so that "111" isn't ambiguous.

answered Dec 8, 2012 at 0:15

DrC

7,7381 gold badge26 silver badges38 bronze badges

Collectives™ on Stack Overflow

TypeError document.getElementByID() ... is null?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related