如何觸發循環中創建的所有元素'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值在loop被分配，將持有的最後element

值簡單的解決方案：

使用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>

或者：使用closure，returned-function記住其所創建的環境！

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>