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 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.
Aucun commentaire:
Enregistrer un commentaire