为什么JavaScript无法找到给定的InnerHTML并返回无法设置属性'innerHTML'为null？

Question

为什么网站http://xn--wiadomesny-37b.pl/test/引发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)); 
}} 

当我改变

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

到

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

它就像一个魅力 - 为什么？

Answer 1

您的代码有两个基本问题。

首先，当你做addEventListener("click", B_modeWindow('1', this.id));，你不分配B_modewindow回调到单击事件处理程序，你实际上是执行功能。

其次，在这种情况下this不指点击的元素，它指的是Window对象，从而this.id给你undefined，使用event.target.id代替：

为了解决这个问题，请使用以下而不是：

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

这里有一个简单的DEMO。