javascript - 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: Cannot read property 'classList' of null”。请提供任何帮助。

标签： javascriptcss

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>