@yagyar001
Начинающий front-end разработчик =)

Почему не удаляются события через removeEventListener?

Всем привет. Учу js. Пишу игру крестики - нолики, играть будет компьютер и пользователь. После хода пользователя получаю все оставшиеся пустые клетки, чтобы сходил в первую попавшуюся компьютер. После хода пользователя событие на клетку, куда он сходил удаляется, а вот после компьютера нет. Что сделал не так?
const cells = document.querySelectorAll('.main .main_cell');

    cells.forEach(cell => {
        if (cell.dataset.number == 5) {
            let img = document.createElement('img');
            img.src = 'img/cross.png';
            cell.append(img);
        } else {
            cell.addEventListener('click', function go () {

                let img = document.createElement('img');
                img.src = 'img/zero.png';
                cell.append(img);

                let newCells = document.querySelectorAll('.main .main_cell');
                for (let i = 0; i < newCells.length; i++) {
                    if (newCells[i].innerHTML == '') {
                        let img2 = document.createElement('img');
                        img2.src = 'img/cross.png';
                        newCells[i].append(img2);
                        newCells[i].removeEventListener('click', go);
                        break;
                        
                    }
                }

                cell.removeEventListener('click', go);  
            });
        }
    });


<div class="main">
        <div data-number = '1' class="main_cell"></div> 
        <div data-number = '2' class="main_cell"></div>
        <div data-number = '3' class="main_cell"></div><br>
        <div data-number = '4' class="main_cell"></div>
        <div data-number = '5' class="main_cell"></div>
        <div data-number = '6' class="main_cell"></div><br>
        <div data-number = '7' class="main_cell"></div>
        <div data-number = '8' class="main_cell"></div>
        <div data-number = '9' class="main_cell"></div>
    </div>


.main_cell {
    border: 1px solid red; 
    width: 100px;
    height: 100px;
    display: inline-block;
    cursor: pointer;
}
.main_cell img {
    width: 100%;
    height: 100%;
    
}
.main_cell:hover {
    border: 3px solid red; 
}
  • Вопрос задан
  • 143 просмотра
Решения вопроса 1
Stalker_RED
@Stalker_RED
Просто удалялка событий - довольно нежная штука, ей подавай точно такую-же функцию, которую навешивали. А у вас видимо что-то меняется. Можно конечно покопаться, и найти способ корректно удалять, но есть способ проще:

не удалять никакие обработчики и использовать всего один обработчик кликов.

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
like-a-boss
@like-a-boss
Признайся,тебяТянетНаКодМужика,ты—программный гей
Вы функцию go определили не в той области видимости.

Нужно было:
function go () {
  // ...
}

cell.addEventListener('click', go);


Тогда бы стало возможным:
cell.removeEventListener('click', go);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
27 янв. 2021, в 00:37
11111 руб./за проект
26 янв. 2021, в 23:30
3000 руб./за проект
26 янв. 2021, в 23:07
1000 руб./за проект