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