Дважды срабатывает прослушиватель щелчка

avatar
merko
8 апреля 2018 в 07:43
1479
1
2

Я создаю игру Саймона в качестве испытания Freecodecamp, я закончил основные вещи, теперь я пытаюсь перезагрузить игру. У меня есть функция, которая сбрасывает его, очищает массивы, тайм-ауты и т. д.

Проблема заключается в том, что когда я запускаю новую игру, снова нажимая кнопку "Старт", она сбрасывается, начинается новая игра, но при нажатии на цвет срабатывает двойное нажатие цвета в массиве игроков.

Вот код: codepen

        function reset() {
        clearTimeout(repeating);
        clearTimeout(genColor);
        pickedColors = []; // computer random colors
        guessingColors = []; //colors that player picks, should match picked ones
        gameOn = false;
        countNumber = 0;  
    }

     function game() {
// Counting
  console.log(pickedColors, guessingColors);
      counter.innerHTML = countNumber;
// New color
          genRandom = setTimeout(() => {
             getRandomColor();
              }, 5);
        guessingColors = [];
 // Add click listener for each color
  for(let i=0; i<colors.children.length; i++) {
    // Guessing

    colors.children[i].addEventListener("click", function(e) {
      if(!running) {
        // Add clicked color to user clicked array
          guessingColors.push(this);
        console.log(guessingColors);
      // Add animation class
        clickClass(this);
      } else {
        e.stopPropagation();
      }

    // repeating.....

running — логическое значение для остановки прослушивателя кликов, когда компьютер переключается..

Источник
Teemu
8 апреля 2018 в 07:59
1

Вы должны подключить слушателей вне функции game или отсоединить слушателей в функции reset.

PSK
8 апреля 2018 в 08:03
0

Проверьте это coderhelper.com/questions/26146108/…

Ответы (1)

avatar
Taki
8 апреля 2018 в 08:10
3

в идеале было бы удалить прослушиватель событий, когда вы закончите с ним, или поместить его за пределы game(), но вот быстрое решение:

используйте .onclick вместо addEventListener, это перезапишет исходное вместо добавления другого события, когда вызывается game(), и вы можете использовать if(colors.children[i].onclick) в другом месте, чтобы проверить, есть ли у элемента событие onclick к нему.

строка 157 в вашем PEN становится: colors.children[i].onclick = function(e) {

и удалите ) в строке 204

document.querySelector('#btn').onclick = function() {
  console.log('here');
};

document.querySelector('#btn').onclick = function() {
  console.log('hello'); // this will overwrite the first one
}; 

if (document.querySelector('#btn').onclick)
  console.log('it has an event listener');
else
  console.log('it does not');
<button id="btn">Click me</button>