Question

我正在尝试创建一个tic tac toe游戏，您可以与Math.floor(Math.random())玩O，用户正在玩X。但是当我点击时，它有时会在已填充的框中创建O。

我只想在每个P允许一个div代码。

警告：代码非常混乱且过于复杂（抱歉）。

HTML：

<body onload="createDivs()">
  <p id="demo"></p> 
</body>

css：

div {
  border: solid 2px black;
  width: 300px;
  height: 300px;
  float: left;
  border-right: none;
  border-top: none;
  overflow: hidden;
}

JavaScript的：

var alternate = "O";
var count = 0;

function createDivs() {
  var t;
  var ai;
  var trackId = [];

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

    d.onclick = function() {
      if (count > 8) {
        return
      }

      var xP = document.createElement("P");
      var oP = document.createElement("P");

      var childCount = "childID" + count;

      xP.setAttribute("id", childCount);

      trackId.push(childCount);
      /*
      alert(trackId.toString());
      */

      count++;
      oP.setAttribute("id", "childID" + count);
      count++;

      if (alternate == 'O') {
        t = document.createTextNode("X");
        alternate = 'X';
        xP.appendChild(t);
        this.appendChild(xP);
        this.onclick = function() {};

        /*
        for (aa = 0; aa < 9; aa++) {
            var zed = "D"+aa;
            var bb = document.getElementById(zed).innerText;
            while (bb == 'X' || bb == 'O') {
                zed = Math.floor(Math.random() * 9);
            } 
        }
        */

        if (count > 9) {} else {

          while (zed == 'X' || zed == 'O') {
            var r = Math.floor(Math.random() * 9);
            var zed = document.getElementById("D" + r).innerHTML;
            var zob = "D" + r;
            document.getElementById("demo").innerHTML = testConcat;
          }

          ai = document.createTextNode("O");
          alternate = 'O';
          oP.appendChild(ai);
          d.appendChild(oP);
        }
      }
    }

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

Answer 1

代码中几乎没有问题但主要问题是当你在寻找下一个空槽时，你正在检查Div的innerHTML是否等于＆＃34; X＆＃34;或者＆＃34; O＆＃34;。您不能使用此逻辑，因为您要在div中附加 p 标记，其中包含＆＃34; X＆＃34;或者＆＃34; O＆＃34;作为文本。

因此，当您在while循环中执行 document.getElementById（＆＃34; D＆＃34; + r）.innerHTML 时，您将变为空（这对您有用）或其中一个

<p>X</p>
<p>O</p>

（这将开始导致问题），因为这会使代码再次将孩子附加到同一个Div上。

您最好检查Div中的子元素，如果已经有子元素（插槽已经填充），代码应该查找另一个空插槽。

这是更新的代码段

function createDivs（）{ var t; var ai; var trackId = []; var count = 0; var alternate =＆＃34; O＆＃34 ;;

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

        d.onclick = function() {
            if (count > 8) { 
                return
            }

            var xP = document.createElement("P");
            var oP = document.createElement("P");
            var zed = "X";
            var zod;

            var childCount = "childID"+count;

            xP.setAttribute("id", childCount);

            trackId.push(childCount);
            /*
            alert(trackId.toString());
            */

            count++;
            oP.setAttribute("id", "childID"+count);
            count++;

            if (alternate == 'O') {
                t = document.createTextNode("X");
                alternate = 'X';
                xP.appendChild(t);
                this.appendChild(xP);
                this.onclick = function() {};
                if (count > 9) {
                }
                else
                {
                while (zed == 'X' || zed == 'O') 
                {
                var r = Math.floor(Math.random() * 9);
                if(document.getElementById("D"+r).childElementCount == 0)
                zed = "";
                zob = "D"+r;
                }

                ai = document.createTextNode("O");
                alternate = 'O';
                oP.appendChild(ai);
                document.getElementById(zob).appendChild(oP);
            }
            }
        }

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

Plunker：http://plnkr.co/edit/FgQ5KbNEvBpnag9mn9qO?p=preview

希望这会对你有所帮助。

Answer 2

如果您想添加jQuery，可以使用if ($(this).find("p").length == 0)

执行此操作

此处为jsfiddle

防止.appendChild在已经填充的div中创建？

2 个答案: