Question

79

The new child element contains the parent

rated 0 times [ 85] [ 6] / answers: 1 / hits: 20240 / 9 Years ago, thu, april 16, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eden

Add To Favorites

Follow

Total Points: 730

Total Questions: 117

Total Answers: 117

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

answered 9 Years ago stefanicarolinat · Accepted Answer

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.