新的 child 元素包含 parent

Question

我正在尝试做一个 Tic-Tac-Toe 游戏，但在将背景图像更改为 X 或 O 的图像时遇到问题。我正在使用 <td> 单元格 ID事件侦听器单击我的 <td> 单元格。

这是我的 table 的创建，其中包含所有已识别的单元格以及包含在具有不同 ID 的所有单元格中的图像。函数

function BuildTable(rows, cols) {
    BuildDivJeu();
    var table = document.createElement("TABLE");
    table.id = "Table";
    document.getElementById("Jeu").appendChild(table);
    for (var row = 1; row <= rows; row++) {
        var rangee = document.createElement("TR");
        rangee.id = row;
        document.getElementById("Table").appendChild(rangee);
        for (var col = 1; col <= cols; col++) {
            var cellule = document.createElement("TD");
            var img = document.createElement("IMG");
            cellule.id = "R" + row + "C" + col;
            img.setAttribute("id", cellule.id);
            img.setAttribute("src", "Images/VN.png");
            img.setAttribute("alt", "VN")

            cellule.appendChild(img);
            document.getElementById(row).appendChild(cellule);
            cellule.addEventListener("click", Jouer);
        }
    }
}

这是我的函数，它根据单击的单元格更改单元格中的图像。

 function Jouer() {
     var x = event.currentTarget
     var id = x.id;
     var imgx = document.getElementById(id);
     var imgo = document.getElementById(id);
     if (turn % 2 == 0) {
         if (x.alt != "VN" | x.alt != "ON") {
             if (imgx.hasAttribute("alt")) {
                 imgx.setAttribute("src", "Images/XN.png");
                 imgx.setAttribute("id", "XN");
                 imgx.setAttribute("alt", "XN");
             }
             x.appendChild(imgx);
         }
         turn++;
     } else {
         if (x.id != "VN" | x.id != "XN") {
             if (imgo.hasAttribute("alt")) {
                 imgo.setAttribute("src", "Images/ON.png");
                 imgo.setAttribute("id", "ON");
                 imgo.setAttribute("alt", "ON");
             }
             x.appendChild(imgo);
         }
         turn++;
     }
 }

当我单击要放置 X 或 O 的单元格时，它无法使用错误消息作为此锅提及的标题。我想知道如何使用新 ID 更改单元格中的图像。

Answer 1

您在 Jouer() 中的逻辑有问题。当你点击一个单元格时，我不知道你到底想做什么，但这是你实际在做什么以及为什么会出现这个错误。

部分问题是您为 <td> 和 <img> 分配了完全相同的 ID。你不能那样做。 Id 值在文档中必须是唯一的。当您调用 document.getElementById(id) 时，它很可能只会 return 匹配该 id 的第一个对象（尽管由于这是非法的 HTML 语法，规范未定义确切的行为）。

此外，这是 Jouer() 的第一部分正在做的事情：

 // get the element that was clicked on which is the <td> element
 var x = event.currentTarget
 // get the id of the element that was clicked on
 var id = x.id;
 // find the element that has that id, which is probably going to be the containing <td> 
 // since it's the first item with that id
 var imgx = document.getElementById(id);
 // assign same element to imgo
 var imgo = document.getElementById(id);

 // so, at this point x and imgx and imgo all point at the containing <td>

然后，稍后在该函数中，您尝试这样做：

 x.appendChild(imgx);

但是，x 和 imgx 是同一个元素。您不能将元素附加到自身。错误消息本身有点令人困惑，因为它说 "The new child element contains the parent"，但是他们可能在代码中检查的是新父级是否在子级层次结构中的任何位置，这将使它成为非法操作，并且它变成了顶部或层次结构，因此您会收到此错误消息。

如果您想用文字准确解释您希望在点击时发生什么，那么我可能会建议可以执行此操作的代码。

新的 child 元素包含 parent

The new child element contains the parent

html

javascript

image

appendchild