javascript - 为什么 JavaScript 找不到给定的 InnerHTML 并返回无法设置属性“innerHTML”为空？

Question

为什么网站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));
}}

当我改变

("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。