JavaScript无法正常工作。显示无法读取属性

Question

以下包含我的HTML代码

这是JS代码。...

const navbtn = document.querySelector('.navbar__btn');
const navlink = document.querySelector('.navbar__link');

navbtn.addEventListener('click', function () {
    let value = navlink.classList.contains('navbar__collapse');


    if (value) {
        navlink.classList.remove('navbar__collapse');
    } else {
        navlink.classList.add('navbar__collapse');
    }
});

，这是CSS代码。

.navbar_link{
    list-style-type: none;
    transition: all 2s ease;
    /* */
    height:0;
   overflow: hidden;
}

.navbar__collapse{
    height: 250px;
}

但是当我在服务器上运行它时，它在我的js代码的第6行显示“ Uncaught TypeError：无法读取null的属性'classList'”。请提供任何帮助。

Answer 1

如评论中所述，是双底线_导致了问题。

这是您的代码的有效示例。

const navbtn = document.querySelector('.navbar_btn');
const navlink = document.querySelector('.navbar_link');

navbtn.addEventListener('click', function() {
  let value = navlink.classList.contains('navbar_collapse');

  if (value) {
    navlink.classList.remove('navbar_collapse');
  } else {
    navlink.classList.add('navbar_collapse');
  }
});

.navbar_btn {
  margin: 10px;
}

.navbar_link {
  list-style-type: none;
  transition: all 2s ease;
  overflow: hidden;
  background-color: blue;
  height: 100px;
  width: 100px;
}

.navbar_collapse {
  height: 250px;
}

<button class="navbar_btn">Button</button>
<div class="navbar_link"></div>