我正在尝试创建一个井字游戏，您可以在其中以 O 的身份与 Math.floor(Math.random()) 进行游戏，而用户正在玩如X。但是当我单击时，它有时会在已填充的框中创建 O。
我只想允许每个 div 有一个 P 标签。
警告:代码极其困惑且过于复杂(抱歉)。
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";
}
}
}
最佳答案
代码中几乎没有问题，但主要问题是当您寻找下一个空槽时，您正在检查 Div 的innerHTML 是否等于“X”或“O”。您无法使用此逻辑，因为您要在以“X”或“O”作为文本的 div 内附加 p 标记。
因此，当您在 while 循环内执行 document.getElementById("D"+r).innerHTML 时，您要么会得到空(这对您有用)，要么会得到其中之一
<p>X</p>
<p>O</p>
(这将开始导致问题)，因为这将使代码再次将子项附加到同一 Div 上。
您应该更好地检查 Div 内的子元素，如果已经有一个子元素(插槽已填满)，代码应该寻找另一个空插槽。
这是更新后的代码片段
函数createDivs() { 变量t； 瓦尔艾； var trackId =[]; 变量计数 = 0； var 备用 =“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";
}
}
}
笨蛋:http://plnkr.co/edit/FgQ5KbNEvBpnag9mn9qO?p=preview
希望这对您有帮助。
关于javascript - 阻止 .appendChild 在已填充的 div 内创建？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38292380/