это ссылка на все окно, а не на элемент в цикле forEach - PullRequest
Новая
       37

это ссылка на все окно, а не на элемент в цикле forEach

0 голосов
/ 26 апреля 2020

Я новичок в javascript и пытался применить на практике то, что я знаю, создав игру ti c -ta c -toe.

Я создал сетку в HTML и я пытаюсь записать ход игрока, изменив блок, по которому щелкнули, на X или O, добавив к нему имя класса. Я также сохраняю позицию кликаемого блока и в конце проверяю, привел ли последний ход к выигрышу или нет, используя функцию winCheck .

Ниже приведена часть кода, который вызывает ошибку: 

    const square = document.querySelectorAll('.square')
    // playing : x starts
    let player = 'x'

    square.forEach(block=>{
        block.addEventListener('click', play(player))
    })

    function play(player) {
        if(!search(this.id,occupied)){
            occupied.push(this.id)
            if(player==='x'){
                this.classList.add('x')
                player = 'o'
                x.push(this.id)
            }else if(player==='o'){
                this.classList.add('o')
                player = 'x'
                o.push(this.id)
            }
            winCheck()
        }
    }

ошибка возникла: 

TypeError: this.classList is undefined

Когда я сделал console.log (this) внутри Функция воспроизведения Я увидел, что она ссылается на полное окно (документ или DOM или правильное слово, которое я не знаю, потому что я новичок в разработке front-end )

Прошу прощения, если в вопросе не хватает деталей, трудно сформулировать вопрос на топи c Вы не знаете

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Первое, что я хотел бы сделать, это добавить только один прослушиватель событий в документ, а затем работать с самим событием. Нет смысла прикреплять прослушиватель событий к каждому квадрату, когда кто-то делает свое дело. 

document.addEventListener('click', (event) => {
    // then you want to make sure that the target of the event is one of your squares
    if (event.target.classList.contains('square')) {
        //you want to handle the event here, so to prevent further bubbling
        event.stopPropagation();
        //then start manipulating the appearance of your square
    }
});

Ключевое слово this в Javascript может привести к путанице на ранних стадиях разработки. Я бы избегал этого, пока вы не освоитесь с основами и не будете готовы перейти к более сложным вещам.

1 голос
/ 26 апреля 2020

Вы пишете код Vanilla JS, но вы смешиваете понятия jQuery и Vanilla JS.

Ваша функция play() является функцией события, фактически параметр player передается в это event само по себе.

Так что вам следует:

  • Переименовать параметр player в event.
  • Элемент player должен быть event.currentTarget
  • И this причины следует установить на player самостоятельно (если вы хотите его использовать)
...