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是相同的元素。您无法将元素附加到自身。错误消息本身有点令人困惑，因为它说＆＃34;新的子元素包含父＆＃34;，但他们可能在代码中检查的是新的父元素是否在子层次结构中的任何位置，这将使非法操作，它变为顶部或层次结构，因此您收到此错误消息。

如果你想用文字解释你在点击时想要发生什么，那么我可能会建议那样做的代码。

新的子元素包含父元素

1 个答案: