Как сделать что бы на одном элементе NodeList eventListenter срабатывал только 1 раз?

Question

Как сделать что бы на одном элементе NodeList eventListenter срабатывал только 1 раз?

VIktor Ученик (55), на голосовании 1 год назад

 
const gameCell = document.querySelectorAll(".game_field");
let isCircleTurn = true;

function writeCircleOrCross() {
  gameCell.forEach((el) => {
    el.addEventListener("click", (e) => {
      if (isCircleTurn) {
        const cross = document.createElement("div");
        cross.classList.add("cross");
        e.target.append(cross);
      } else {
        const circle = document.createElement("div");
        circle.classList.add("circle");
        e.target.append(circle);
      }
      isCircleTurn = !isCircleTurn;
    });
  });
}

writeCircleOrCross();

У меня проблема, что создается каждый раз блок в блоке из-за чего получается вложенная структура как рекурсия.из-за чего я не могу проверить количество дочерних эллементов у game_cell. Мне нужно сделать что бы в 1ой ячейке game_cell только 1 раз можно было оставить или круг или крестик.То есть проверить есть ли у конкретного game_cell дочерний эллемент,если нет, то добавлять, если есть, то не добавлять.

Answer 1

const gameCell = document.querySelectorAll(".game_field");
let isCircleTurn = true;

function writeCircleOrCross() {
gameCell.forEach((el) => {
el.removeEventListener("click", onClick); // удаление старого обработчика
el.addEventListener("click", onClick); // добавление нового обработчика
});
}

function onClick(e) {
if ( e.target .childElementCount === 0) { // проверка наличия дочерних элементов
if (isCircleTurn) {
const cross = document.createElement("div");
cross.classList.add("cross");
e.target .append(cross);
} else {
const circle = document.createElement("div");
circle.classList.add("circle");
e.target .append(circle);
}
isCircleTurn = !isCircleTurn;
}
}

writeCircleOrCross();

Answer 2

Всё решение проблемы:

 const gameCell = document.querySelectorAll(".game_field");  
let isCircleTurn = true;  
  
function writeCircleOrCross() {  
  gameCell.forEach((el) => {  
    el.addEventListener("click", (e) => {  
      if (isCircleTurn) {  
        const cross = document.createElement("div");  
        cross.classList.add("cross");  
        e.target.append(cross);  
      } else {  
        const circle = document.createElement("div");  
        circle.classList.add("circle");  
        e.target.append(circle);  
      }  
      isCircleTurn = !isCircleTurn;  
    }, { once: true }); // добавляешь данный объект к аргументам 
  });  
}  
  
writeCircleOrCross();

Answer 3

А если после срабатывания удалять прослушиватель и все?