Quote:
element.removeEventListener('click',play(boxtext))
Breaking that line down, you want to remove a listener for the
click
event on the specified element. The listener you want to remove is
the function returned from the
play(boxtext)
call.
But your
play
function
doesn't return a function, so there is no listener to remove.
The simpler option would be to use
event delegation[
^], and test the
isover
variable at the start of the handler. For example:
document.addEventListener("click", (e) => {
if (isover) { return; }
let box = e.target;
if (!box.classList.contains("box")) { box = box.closest(".box"); }
if (!box) { return; }
const boxtext = box.querySelector(".btext");
if (!boxtext) { return; }
play(boxtext);
});
document.getElementById("reset").addEventListener("click", () => {
turn = "X";
isover = false;
document.querySelectorAll(".btext").forEach(boxtext => boxtext.innerText = "");
const info = document.querySelector(".info");
info.innerText = `${turn}'s turn`;
info.style.color= 'black';
info.style.fontWeight='100';
});
const check = () => {
const wins = [
[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]
];
const boxtext = document.getElementsByClassName("btext");
for (const win of wins) {
const t0 = boxtext[win[0]].innerText;
const t1 = boxtext[win[1]].innerText;
const t2 = boxtext[win[2]].innerText;
if (t0 !== "" && t0 === t1 && t0 === t2) {
isOver = true;
const info = document.querySelector(".info");
info.innerText = `${t0} WON`;
info.style.color = 'rgb(142, 2, 109)';
info.style.fontWeight = 'bold';
return;
}
}
};