Javascript 将onclick事件添加到循环中的各个div

我正在做一个井字游戏。 我想向每个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";
    }
  }
}

函数createDivs（）{
对于（i=0；i<9；i++）{
var d=document.createElement（“DIV”）；
文件.正文.附件（d）；
//卡在这里-从一个类似的主题借用了一些信息-
d、 onclick=function（）{
返回函数（）{
var p=document.createElement（“p”）；
var x=document.createTextNode（“x”）；
p、 儿童（x）；
d、 儿童（p）；
}
}（i） )；
//-------------------------------------------------  
var ii=document.createAttribute（“id”）；
ii.value=“D”+i；
d、 塞特列诺（ii）；
var z=“D”+i；
如果（i==3 | | i==6）{
document.getElementById（z.style.clear=“left”；
}
}
}

---

html:

将

d

作为参数传递，并将其作为参数接受，以便在执行

单击

处理函数时闭包将记住它

d

只是您正在创建的

元素（
var d=document.createElement（“DIV”）；
）


函数createDivs（）{
对于（i=0；i<9；i++）{
var d=document.createElement（“DIV”）；
d、 style.float='left'；
文件.正文.附件（d）；
d、 onclick=函数（d）{
//----------------^^^在这里接受d
返回函数（）{
var p=document.createElement（“p”）；
var x=document.createTextNode（“x”）；
p、 儿童（x）；
d、 儿童（p）；
d、 onclick=function（）{}；//在单击事件后取消设置函数
}
}（d） )；
//^^在这里通过d
var ii=document.createAttribute（“id”）；
ii.value=“D”+i；
d、 塞特列诺（ii）；
var z=“D”+i；
如果（i==3 | | i==6）{
document.getElementById（z.style.clear=“left”；
}
}
}
div{
宽度：30px；
高度：30px；
边框：1px纯黑；
}
将
d
作为参数传递，并将其作为参数接受，以便在执行
单击
处理函数时闭包将记住它

d
只是您正在创建的
元素（
var d=document.createElement（“DIV”）；
）


函数createDivs（）{
对于（i=0；i<9；i++）{
var d=document.createElement（“DIV”）；
d、 style.float='left'；
文件.正文.附件（d）；
d、 onclick=函数（d）{
//----------------^^^在这里接受d
返回函数（）{
var p=document.createElement（“p”）；
var x=document.createTextNode（“x”）；
p、 儿童（x）；
d、 儿童（p）；
d、 onclick=function（）{}；//在单击事件后取消设置函数
}
}（d） )；
//^^在这里通过d
var ii=document.createAttribute（“id”）；
ii.value=“D”+i；
d、 塞特列诺（ii）；
var z=“D”+i；
如果（i==3 | | i==6）{
document.getElementById（z.style.clear=“left”；
}
}
}
div{
宽度：30px；
高度：30px；
边框：1px纯黑；
}
非常感谢您的宝贵时间！对不起，我漏掉了我的css。我真的不知道函数后面的（d）在做什么。@HYUTS–我已经更新了它。。我很高兴它帮了大忙，伙计！Happy coding难道你不能在函数中使用
这个
来引用事件的目标吗？@Barmar–当我键入此答案时，我确实想到了这一点，但这不会突出显示代码的错误。。我已经用
这个
更新了答案…@Rayon无论如何，我能阻止它让我继续向同一个div添加更多的X吗？谢谢。那很有效。谢谢你的时间！对不起，我漏掉了我的css。我真的不知道函数后面的（d）在做什么。@HYUTS–我已经更新了它。。我很高兴它帮了大忙，伙计！Happy coding难道你不能在函数中使用
这个
来引用事件的目标吗？@Barmar–当我键入此答案时，我确实想到了这一点，但这不会突出显示代码的错误。。我已经用
这个
更新了答案…@Rayon无论如何，我能阻止它让我继续向同一个div添加更多的X吗？谢谢