Question

我正在制作一个井字游戏。我想为每个div添加单独的onclick事件，这样我就可以添加一个＆＃34; X＆＃34;或者＆＃34; O＆＃34;取决于div我点击。＆＃34; O＆＃34;将在稍后添加。

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()">

Answer 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;
}

<body onload="createDivs()">

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

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;
}

<body onload="createDivs()">

将onclick事件添加到循环

1 个答案: