Why JavaScript can't find given InnerHTML and returns Cannot set property 'innerHTML' of null?

Question

Why site http://xn--wiadomesny-37b.pl/test/ throws Uncaught TypeError: Cannot set property 'innerHTML' of null?

HTML (http://xn--wiadomesny-37b.pl/test/):

<div class="castle_array" id="2x1" name="2x1"></div>
<div class="castle_array" id="3x1" name="3x1"></div>
<div class="castle_array" id="4x1" name="4x1"></div>
...

JavaScript (http://xn--wiadomesny-37b.pl/test/B_modeWindow.js):

for (x = 1; x <= 5; x++) {
for (y = 1; y <= 5; y++) {
  document.getElementById(x+"x"+y).addEventListener("click",B_modeWindow('1',this.id));
}}

When I alter

("click",B_modeWindow('1',this.id)

to

("click",B_modeWindow('1','string')

it works like a charm - why?

Because the JavaScript isn't finding the element on which it should, apparently, be working. Please post a live demo that reproduces the, or your, problem. — David Thomas
– David Thomas, Commented Sep 9, 2012 at 19:00

João Silva · Accepted Answer · 2012-09-09 20:09:23Z

2

There are two fundamental issues with your code.

First, when you do addEventListener("click", B_modeWindow('1', this.id));, you're not assigning the B_modewindow callback to the click event handler, you are actually executing the function.

Secondly, in that context this does not refer to the clicked element, it refers to the Window object, thus this.id gives you undefined, use event.target.id instead:

To fix it, use the following instead:

var el = document.getElementById(x+"x"+y);
el.addEventListener("click", function (event) {
  B_modeWindow('1', event.target.id);
});

Here's a simplified DEMO.

edited Sep 9, 2012 at 20:09

answered Sep 9, 2012 at 19:17

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

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

3 Comments

Szymon Toda Over a year ago

Yet it thorws (not critical) error: Uncaught TypeError: Cannot set property 'innerHTML' of null B_modeWindow.js:14 B_modeWindow.xmlhttp.onreadystatechange

João Silva Over a year ago

@user1656447: Have you updated your code with mine? See my demo, the alerted value is correct. Can you update your site, so that I can check what's wrong?

Szymon Toda Over a year ago

Sorry Joao Silva, your solution works perfect. Thank you for very detailed and helpful explanation.

Collectives™ on Stack Overflow

Why JavaScript can't find given InnerHTML and returns Cannot set property 'innerHTML' of null?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related