将 onclick 事件添加到循环内的单个 div答案

【问题标题】：Add onclick event to individual divs within loop将 onclick 事件添加到循环内的单个 div
【发布时间】：2016-07-10 12:53:25
【问题描述】：

我正在制作井字游戏。我想为每个 div 添加单独的 onclick 事件，以便我可以根据单击的 div 添加“X”或“O”。稍后会添加“O”。

JavaScript：

function createDivs() {
  for (i = 0; i < 9; i++) {
    var d = document.createElement("DIV");
    document.body.appendChild(d);

    //Stuck here -borrowed some of this from a similar topic-    
    d.onclick = function() {
      return function() {
        var p = document.createElement("P");
        var x = document.createTextNode("X");
        p.appendChild(x);
        d.appendChild(p);
      }
    }(i);
    //-------------------------------------------------  

    var ii = document.createAttribute("id");
    ii.value = "D" + i;
    d.setAttributeNode(ii);
    var z = "D" + i;
    if (i == 3 || i == 6) {
      document.getElementById(z).style.clear = "left";
    }
  }
}

html:<body onload="createDivs()">

【问题讨论】：

标签： javascript html onclick mouseevent addeventlistener

【解决方案1】：

将d 作为参数传递并接受它作为参数，以便在执行click handler-function 时闭包会记住它。

d 只不过是您正在创建的element（var d = document.createElement("DIV");）

function createDivs() {
  for (i = 0; i < 9; i++) {
    var d = document.createElement("DIV");
    d.style.float = 'left';
    document.body.appendChild(d);
    d.onclick = function(d) {
      //----------------^^^ Accept d here
      return function() {
        var p = document.createElement("P");
        var x = document.createTextNode("X");
        p.appendChild(x);
        d.appendChild(p);
        d.onclick = function() {}; //Unset function after click event
      }
    }(d);
    //^^ Pass d here
    var ii = document.createAttribute("id");
    ii.value = "D" + i;
    d.setAttributeNode(ii);
    var z = "D" + i;
    if (i == 3 || i == 6) {
      document.getElementById(z).style.clear = "left";
    }
  }
}

div {
  width: 30px;
  height: 30px;
  border: 1px solid black;
}

&lt;body onload="createDivs()"&gt;

更新：根据 cmets 中 Barmar 的建议，event-handler 函数中的 this 值将是事件注册的元素。

function createDivs() {
  for (i = 0; i < 9; i++) {
    var d = document.createElement("DIV");
    d.style.float = 'left';
    document.body.appendChild(d);
    d.onclick = function() {
      var p = document.createElement("P");
      var x = document.createTextNode("X");
      p.appendChild(x);
      this.appendChild(p);
      this.onclick = function() {}; //Unset function after click event
    };
    var ii = document.createAttribute("id");
    ii.value = "D" + i;
    d.setAttributeNode(ii);
    var z = "D" + i;
    if (i == 3 || i == 6) {
      document.getElementById(z).style.clear = "left";
    }
  }
}

div {
  width: 30px;
  height: 30px;
  border: 1px solid black;
}

&lt;body onload="createDivs()"&gt;

【讨论】：

很有效，感谢您的宝贵时间！对不起，我遗漏了我的 CSS。老实说，我不知道函数后面的 (d) 是做什么的。
@HYUTS - 我已经更新了它。我很高兴它帮助了交配！ 快乐编码
不能在函数中直接使用this来引用事件的目标吗？
@Barmar – 我在输入这个答案时确实想到了这一点，但这并没有突出显示 OP 共享的代码有什么问题。我也用this 更新了答案。 ..
@Rayon 无论如何我可以阻止它允许我继续向同一个 div 添加更多 X？谢谢。