类型错误：无法访问属性“classList”，btnMenu 未定义 btnMenu

Question

const btnMenu = document.querySelector('#btnMenu')  .addEventListener('click', function() {    console.log('open menu');    if (btnMenu.classList.contains('open')) {      btnMenu.classList.remove('open')    } else {      btnMenu.classList.add('open')    }  });这段代码有什么问题，我试着绕过它，它是为了广告打开菜单的动作，但我现在只做动画。

Answer 1

尝试这种方式..

const btnMenu=document.querySelector('#btnMenu');

btnMenu.addEventListener('click', function(){

    console.log('open menu');

    if(btnMenu.classList.contains('open')){

    btnMenu.classList.remove('open')    

}

else{

    btnMenu.classList.add('open')

}

});

Answer 2

因为btnMenu被设置为addEventListener- 这不是对按钮的引用的结果。该方法返回undefined！

在事件侦听器函数中将this引用元素：

document.querySelector('#btnMenu')

  .addEventListener('click', function() {

    console.log('open menu');

    if (this.classList.contains('open')) {

      this.classList.remove('open')

    } else {

      this.classList.add('open')

    }

  });