addEventListener в цикл

Question

Пробую написать игру "Крестики нолики". Создал 9 div'ов и дал им значения emoji1, далее написал функцию которая при клике по одному из div'ов меняет его значение emoji1 на полученное из параметра функции.

const players = {
  player_1: 'emoji2',
  player_2: 'emoji3'
}
function step(player_x) {

  cell_0.addEventListener('click', () => {
    if (cell_0.classList.contains('empty')) {
      cell_0.classList.add('active')
      cell_0.classList.remove('empty')
      cell_0.innerHTML = player_x
    }
  })

  cell_1.addEventListener('click', () => {
    if (cell_1.classList.contains('empty')) {
      cell_1.classList.add('active')
      cell_1.classList.remove('empty')
      cell_1.innerHTML = player_x

    }
  })

  cell_2.addEventListener('click', () => {
    if (cell_2.classList.contains('empty')) {
      cell_2.classList.add('active')
      cell_2.classList.remove('empty')
      cell_2.innerHTML = player_x

    }
  })

И пробую эту функцию зациклить.

while( winner == false){
  for (const player in players) {
    step(players[player])
  }
}

Но значение одного div'а меняется только на emoji2. Не могу понять как сделать чтобы при первом клике значение div'а менялось на emoji2 а при втором на emoji3.

Answer 1

document.addEventListener("DOMContentLoaded", function() {

  const cells = document.querySelectorAll('.tic-tac-toe__item');

  cells.forEach(function(element) {
    element.addEventListener('click', function() {
      if (element.textContent === 'emoji1') {
        element.setAttribute('data-value', 'emoji2');
        element.textContent = 'emoji2';
      } else if (element.textContent === 'emoji2') {
        element.setAttribute('data-value', 'emoji3');
        element.textContent = 'emoji3';
      }
    });
  });

});

* {
box-sizing: border-box;
}
.tic-tac-toe {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  padding: 15px;
}
.tic-tac-toe__item {
  flex-basis: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1px solid grey;
  cursor: pointer;
  margin-right: 3.33%;
  margin-bottom: 3.33%;
  user-select: none;
}
.tic-tac-toe__item:hover {
  background-color: grey;
}

  <div class="tic-tac-toe">
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
  </div>

Или, используя подход: делегирование событий:

document.addEventListener("DOMContentLoaded", function() {

  const tic_tac_toe = document.querySelector('.tic-tac-toe');

  tic_tac_toe.addEventListener('click', function(event) {
    let cell = event.target.closest('.tic-tac-toe__item');

    if(cell) {
      if (cell.textContent === 'emoji1') {
        cell.setAttribute('data-value', 'emoji2');
        cell.textContent = 'emoji2';
      } else if (cell.textContent === 'emoji2') {
        cell.setAttribute('data-value', 'emoji3');
        cell.textContent = 'emoji3';
      }
    }

  });

});

* {
  box-sizing: border-box;
}
.tic-tac-toe {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  padding: 15px;
}
.tic-tac-toe__item {
  flex-basis: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1px solid grey;
  cursor: pointer;
  margin-right: 3.33%;
  margin-bottom: 3.33%;
  user-select: none;
}
.tic-tac-toe__item:hover {
  background-color: grey;
}

  <div class="tic-tac-toe">
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
    <div class="tic-tac-toe__item" data-value="emoji1">emoji1</div>
  </div>

БЛОГ НА HUSL

addEventListener в цикл

Ответы (1 шт):