Verhindern, dass .appendChild innerhalb bereits gefüllten div erstellt?

Ich versuche, ein Tic Tac Toe-Spiel zu erstellen, wo Sie gegen Math.floor(Math.random()) spielen als O spielen können, mit Benutzer spielt als X. Aber wenn ich klicke, erzeugt es manchmal O in einer bereits gefüllten Box.Verhindern, dass .appendChild innerhalb bereits gefüllten div erstellt?

Ich möchte nur ein P Tag per div zulassen.

WARNUNG: Code extrem unordentlich und über kompliziert (Entschuldigung).

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

Quelle

2016-07-10 HYUTS

Es gibt nur wenige Probleme im Code waren, aber das Hauptproblem war, dass, wenn Sie für die Suche nächsten leeren Slot prüfen Sie, ob die innerHTML der Div gleich "X" oder "O" ist. Sie können diese Logik nicht verwenden, da Sie das p Tag innerhalb des div anhängen, das "X" oder "O" als Text hat.

Also, wenn Sie document.getElementById tun ("D" + r) .innerHTML innerhalb der while-Schleife wird Sie entweder leer (dies wird für Sie arbeiten) oder eines

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

(diese wird anfangen, Problem zu verursachen), da dies den Code macht, um das Kind wieder an die gleiche Div anzuhängen.

Sie sollten besser nach den Kindelementen innerhalb einer Div suchen und wenn es bereits ein Child-Element gibt (Slot ist bereits gefüllt), sollte Code nach einem anderen leeren Slot suchen.

hier ist der aktualisierte Code

Funktion createDivs() {var t Schnipsel; var ai; var trackId = []; var count = 0; var alternate = "O";

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

Hope this Ihnen helfen.

Quelle

2016-07-10 14:20:19 Deep

Wenn Sie jQuery hinzufügen möchten Sie tun können, dass mit if ($(this).find("p").length == 0)

hier als jsfiddle

Quelle

2016-07-10 14:21:03

Verhindern, dass .appendChild innerhalb bereits gefüllten div erstellt?

Antwort

Verwandte Themen