javascript - The new child element contains the parent - Stack Overflow

admin管理员组

文章数量:1289548

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.

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

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.

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.

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

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.

• javascript
• html
• image
• appendchild

Share Improve this question Follow edited Apr 17, 2015 at 0:25 jfriend00 708k103103 gold badges1k1k silver badges1k1k bronze badges asked Apr 16, 2015 at 23:12 Mathieu LussierMathieu Lussier 6311 gold badge11 silver badge44 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.

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).

Further, here's what the first part of Jouer() is doing:

 // 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, x and imgx are 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.

---

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.

本文标签： javascriptThe new child element contains the parentStack Overflow