javascript - 如何触发循环中创建的所有元素的onclick？

Question

这是我的代码:

   var board = document.getElementById("left");
    for (var m = 0; m < 5; m++) {
        var cell = document.createElement('div');
        cell.className = "Cell";
        cell.style.cssText='background-color:#999999;margin:5px;width:50px;height:100px;';
        cell.onclick= function() {
                    cell.innerHTML = "Hello World";
            };
        cell.name = m;
        board.appendChild(cell);
    }

    <div id="left"></div>
  

但是，当我单击每个 div 时，“Hello World”始终显示在最后一个 div 上。 如何解决？

Answer 1

当cell的值在循环中被赋值时，它将保存最后一个元素的值

简单的解决方案:

在处理函数中使用this!在Event-handler函数中，this指的是调用事件的element!

var board = document.getElementById("left");
for (var m = 0; m < 5; m++) {
  var cell = document.createElement('div');
  cell.className = "Cell";
  cell.style.cssText = 'background-color:#999999;margin:5px;width:50px;height:100px;';
  cell.onclick = function() {
    this.innerHTML = "Hello World";
  };
  cell.name = m;
  board.appendChild(cell);
}

<div id="left"></div>

或者:使用闭包，返回函数会记住它创建的环境!

var board = document.getElementById("left");
for (var m = 0; m < 5; m++) {
  var cell = document.createElement('div');
  cell.className = "Cell";
  cell.style.cssText = 'background-color:#999999;margin:5px;width:50px;height:100px;';
  cell.onclick = (function(cell) {
    return function() {
      cell.innerHTML = "Hello World";
    }
  })(cell);
  cell.name = m;
  board.appendChild(cell);
}

<div id="left"></div>