使用局部变量为循环中的元素设置onclick方法，而无需立即激活它

Question

我有一个for循环，其中我使用循环中的局部变量作为onclick事件回调的参数。我正在按照我在这些帖子中所读的内容进行操作：

Passing parameter onclick, in a loop

Javascript - Dynamically assign onclick event in the loop

但是，我看到的问题是onclick函数仅立即调用一次，然后再调用一次。我在这篇文章中找到了潜在的解决方案：

Javascript onclick function is called immediately (not when clicked)?

除了该示例似乎仅在onclick函数不接受任何参数的情况下才起作用。

所以我们如何A）在循环中使用局部变量设置onclick，以及B）如何在单击时而不是第一次调用它时正确调用它？

这里是一个例子：

https://jsfiddle.net/jq7wbxaz/24/

function generateCard() {
  for(var n = 0; n < 5; n++) {
    for(var k = 0; k < 5; k++) {
      var cell = document.createElement("div");
      cell.setAttribute("class", "box");
      cell.setAttribute("id", "r"+n+"c"+k);
      var letter;
      switch(k) {
        case 0:
            letter = "B";
          break;
        case 1:
            letter = "I";
          break;
        case 2:
            letter = "N";
          break;
        case 3:
            letter = "G";
          break;
        case 4:
            letter = "O";
          break;

      }
      cell.innerHTML = letter + n;
      cell.onclick = (function(c) {changeCellColor(c);})(cell);

      document.getElementById("card").appendChild(cell);
    }
  }
} 

function changeCellColor(cell) {
    //var cell = getCell(n, k);
  console.log("Changing color for cell " + cell.id);
    cell.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}

generateCard();

在这个小提琴中，正在生成宾果卡。期望的行为是使卡的每个盒子都有一个onclick函数，该函数可以更改盒子的颜色。相反，它们在开始时都是随机颜色，onclick不起作用。

任何帮助将不胜感激！

Answer 1

您将在单击单元格时在调用的函数中引用this。它指的是单元格的元素。

因此，您的onclick函数将变为：

cell.onclick = function() { changeCellColor(this) };

More examples here