javascript 新的子元素包含父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29687519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The new child element contains the parent
提问by Mathieu Lussier
I'm trying to do a Tic-Tac-Toe game and I have issues when changing the background image to the image of the X or O. I'm taking the <td>cell id with the event listener click on my <td>cell.
我正在尝试做一个井字游戏，但在将背景图像更改为 X 或 O 的图像时遇到问题。我正在<td>使用事件侦听器单击我的<td>单元格获取单元格 ID 。
This is the creation of my table with all the cells identified and with the images included in all the cells with different ids. function
这是我的表格的创建，其中标识了所有单元格以及包含在具有不同 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);
}
}
}
This is my function that changes the images in the cell depending on which cell is clicked.
这是我的功能，根据单击的单元格更改单元格中的图像。
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++;
}
}
When i click on the cell that I want to put my X or O it doesn't work with the error message as the title of this pot mention. I wonder how I could proceed to change the image in the cell with their new ids.
当我单击要放置 X 或 O 的单元格时，它无法将错误消息作为此锅的标题提及。我想知道如何使用新 ID 更改单元格中的图像。
回答by jfriend00
Your logic in Jouer()is flawed. I don't know exactly what you're trying to do when you click on a cell, but here is what you are actually doing and why you get that error.
你的逻辑Jouer()有问题。我不知道您在单击单元格时究竟想做什么，但这是您实际在做什么以及为什么会出现该错误。
Part of the problem is that you are assigning both the <td>and the <img>the exact same id. You can't do that. Id values must be unique in the document. When you call document.getElementById(id), it will most likely return only the first object that matches that id (though since this is an illegal HTML syntax, the exact behavior is not defined by specification).
问题的部分原因是要分配既<td>和<img>完全相同的ID。你不能那样做。Id 值在文档中必须是唯一的。当您调用 时document.getElementById(id)，它很可能只返回与该 id 匹配的第一个对象（尽管由于这是非法的 HTML 语法，因此规范未定义确切的行为）。
Further, here's what the first part of Jouer()is doing:
此外，这是第一部分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>
Then, later in that function, you try to do this:
然后，稍后在该函数中，您尝试执行以下操作：
x.appendChild(imgx);
But, xand imgxare the same element. You can't append an element to itself. The error message itself is slightly confusing as it says "The new child element contains the parent", but what they are probably checking in the code is whether the new parent is anywhere in the child hierarchy which would make this an illegal operaation and it turns it is at the top or the hierarchy and thus you get this error message.
但是，x和imgx是同一个元素。您不能将元素附加到自身。错误消息本身有点令人困惑，因为它说“新的子元素包含父元素”，但是他们可能在代码中检查的是新的父元素是否在子层次结构中的任何位置，这会使它成为非法操作，并且会变成它位于顶部或层次结构，因此您会收到此错误消息。
If you care to explain in words exactly what you want to happen upon the click, then I can likely suggest code that would do that.
如果你想用文字解释你想要在点击时发生什么，那么我可能会建议可以做到这一点的代码。
