The new child element contains the parent

Question

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.

Solution

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.

Comments

[Mathieu Lussier]

I'm trying to change the image in the original <td> for an other image (imgx and imgo). I don't think I can change the image without getting the <td> id which I change while changing the image. Maybe if I don't put an image in the <td> originally it would work but yet again I would change the id which would result in the same error ?

[jfriend00]

@MathieuLussier - You can change an image by getting the image object in the page and just changing the .src property on it. You don't need to appendChild() anything.

[jfriend00]

Why a downvote? I tackled this somewhat hard to understand question when nobody else would. What is incorrect enough in this answer that it deserves a downvote?

[Mathieu Lussier]

Thanks for your answer I figured a way out to fix my problem.

[jfriend00]

@MathieuLussier - the protocol here is that if you figured out an answer yourself that isn't already offered by someone else, then you should answer your own question. Questions here should end up with an answer when you've resolved your issue. And, when there is an answer that fixes your issue, you should then accept that answer by clicking the green checkmark to the left of the desired answer. This shows the community that your question is now answered.