我已经在 html 下的正文中链接了 JS 文件，但这仍然来了 未捕获的类型错误：无法读取 null 的属性'addEventListener'

Question

我在StackOverflow中看到过类似的问题，他们都建议使用windows.onload并将JS放在HTML下，但问题仍然存在。有时在遵循一些解决方案后，我得到像

这样的错误

加载资源失败:net::ERR_FILE_NOT_FOUND加载json.js

请帮助。谢谢你。

window.onload = function() {
const toggleButton = document.querySelector('toggle-button')
const navbar = document.querySelector('navbar')
toggleButton.addEventListener('click', () => {
navbar.target.classlist.toggle('active')
})
}

@media screen and (max-width: 720px) {
.navbar {
display: none;
width: 100%;
}
.navbar.active{
display: flex;
background-color: black;
height: 100vh;
}
.toggle-button{
display: flex;
}
.flex{
flex-direction: column;
}
.navbar ul{
width: 100%;
flex-direction: column;
}
.navbar li{
margin-top: 5rem;
padding: 0;
}
.navbar li a{
padding: 0;
font-size: 15px;
text-transform: uppercase;
}

.navbar a:after {
display: none;
}

}

<section class="nav">
<div class="container flex">
<div class="logo">
<img src="images/desktop/logo.svg" alt="">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar">
<ul>
<li><a href="#">About</a> </li>
<li><a href="#">Careers</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="hero-text">
<h1>IMMERSIVE <br> EXPERIENCES <br> THAT DELIVER</h1>
</div>
</div>
</section>

Answer 1

如果使用querySelector，则需要指定查找的是类还是id。在你的例子中，因为它是一个类。toggle-button，正确的方法是

document.querySelector('.toggle-button')

但是如果你要查找的目标有一个同名的id，那么它将是

document.querySelector('#toggle-button')

似乎你也对导航条做了同样的事情。所以你也必须改变这个…

我注意到的另一件事是你使用classlist prop，我认为这可能是错误的，而不是classlist，这应该是正确的。

navbar.target.classList.toggle('active')

中的.target是不必要的，并且只会给你一个错误，因为你没有将事件传递给函数。所以这也是要改变的…

不管怎样. .

最终结果最终结果将看起来像这样…它似乎正在工作，但我不知道这是否是您需要的理想结果…

window.onload = function() {
const toggleButton = document.querySelector('.toggle-button')
const navbar = document.querySelector('.navbar')
toggleButton.addEventListener('click', () => {
navbar.classList.toggle('active')
})
}

@media screen and (max-width: 720px) {
.navbar {
display: none;
width: 100%;
}
.navbar.active {
display: flex;
background-color: black;
height: 100vh;
}
.toggle-button {
display: flex;
}
.flex {
flex-direction: column;
}
.navbar ul {
width: 100%;
flex-direction: column;
}
.navbar li {
margin-top: 5rem;
padding: 0;
}
.navbar li a {
padding: 0;
font-size: 15px;
text-transform: uppercase;
}
.navbar a:after {
display: none;
}
}

<section class="nav">
<div class="container flex">
<div class="logo">
<img src="images/desktop/logo.svg" alt="">
</div>
<a href="#" class="toggle-button">
<span class="bar">y</span>
<span class="bar">o</span>
<span class="bar">u</span>
</a>
<div class="navbar">
<ul>
<li><a href="#">About</a> </li>
<li><a href="#">Careers</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="hero-text">
<h1>IMMERSIVE <br> EXPERIENCES <br> THAT DELIVER</h1>
</div>
</div>
</section>

我是编码新手，所以如果我犯了什么错误，对不起，你能指出来吗?谢谢。

Answer 2

toggle-button为a标签的类名，需添加.表示类别。

const toggleButton= document.querySelector('.toggle-button')
^ add "." here

Answer 3

你必须定义你要访问的选择器类型。使用这个const toggle = document.querySelector('.toggle-button').

在这里找到更多关于querySelector的信息https://www.w3schools.com/jsref/met_document_queryselector.asp