新的子元素包含父元素

Question

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

这是我的表格的创建，其中所有单元格都已识别，并且图像包含在具有不同 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)，它很可能只返回与该 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是相同的元素。您不能将元素附加到其自身。错误消息本身有点令人困惑，因为它说“新的子元素包含父元素”，但他们可能在代码中检查的是新的父元素是否位于子层次结构中的任何位置，这将使这是一个非法操作，并且它变成它位于顶部或层次结构，因此您会收到此错误消息。

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