javascript - 为什么 JavaScript 找不到给定的 InnerHTML 并返回 Cannot set property 'innerHTML' of 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));
}}

当我改变

("点击",B_modeWindow('1',this.id)

到

("点击",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 .