我得到了一个任务，由于在2天内，它需要使用javascript，我试图让这个导航栏变成一个汉堡菜单时，它的移动视图与js的工作（需要响应）。我发现这个简单的代码，它的工作，直到最后2行...
const burgerMenu = document.querySelector(".burger_menu");
const navLinks = document.querySelector(".nav-links");
burgerMenu.addEventListener("click", () => {
navLinks.classList.toggle(".mobile-menu");
});当我打开Inspect =〉Console时，它会这样声明："未捕获的类型错误：无法读取nav. js：11：12处的null属性（读取"addEventListener"）"
这个作品在这个法国人的视频，但我想知道，如果它的代码是错误的？错字，我没有看到？
有什么建议吗？任何帮助都将不胜感激!🙏
//视频来源：https://www.youtube.com/watch?v=HQopEEurQYE&ab_channel=LiveCode
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/generel.css" />
<link rel="stylesheet" href="css/layout.css" />
<title>Grid Example 01</title>
</head>
<body>
<header>
<nav class="navbar">
<a class="logo" href="index.html">Amalia</a>
<div class="nav-links">
<ul>
<li><a class="active" href="#">FORSIDE</a></li>
<li><a href="#">OPGAVER</a></li>
<li><a href="#">OM MIG</a></li>
</ul>
</div>
<img
class="burger-menu"
src="./icons/burger_btn.png"
alt="burger menu"
/>
</nav>
</header>
<main class="grid_1-1">
<section>
<h1>Om Mig</h1>
<hr />
<p>
Mit navn er blaaaaah, og jeg i gang med min nuværende
uddannelse på blaaah, som multimedie- og design student!
</p>
<p>
Uddannelsen fandt min interesse, da jeg altid har været på den
kreative side, og jeg vil generelt gerne udforske og lære mulighederne
inden for frontend og web design, hvilket Multimedie- og design
uddannelsen bringer.
</p>
<p>
Min tidligere uddannelse på blaaaah mediefagslinje på
engelsk, har erfaret mig med med programmer såsom: Photoshop, Premier
Pro, Final Cut Pro - men også banet vej for mit freelance arbejde som
fotograf.
</p>
<p>
Således, tror jeg også mine generelle interesser og kompetencer inden
for kunst, fotografi, filmproduktion og videoredigering - har bragt
mig på disse baner.
</p>
<p>Så alt i alt, har den kreative industri har altid lokket mig!</p>
<div class="box-btn-i">
<ul>
<li>
<a
class="btn"
href="./data/info.txt"
download="CV_Amalia"
>CV</a
>
</li>
<li><a class="btn" href="about.html">PROJEKTER</a></li>
</ul>
</div>
</section>
<img src="/img_ama/mig_amalia.jpg" alt="amalia" />
</main>
<footer>
<p>©Amalia 2023</p>
<ul>
<li>
<a href="#">LinkedIn</a>
</li>
<li>
<a href="#">Instagram</a>
</li>
</ul>
</footer>
</body>
<script src="nav.js"></script>
</html>[the CSS用于此]
body {
margin: 0;
/* De næste tre linjer er for at lave en "sticky footer" */
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
main {
padding: 1em;
}
img {
max-width: 100%;
}
nav > ul {
list-style: none;
/* De næste fire linjer placerer menuen i center */
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
padding: 0;
}
@media (min-width: 800px) {
.grid_1-1 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
max-width: 1200px;
justify-self: center;
}
}
.navbar .burger-menu {
display: none;
position: absolute;
width: 35px;
top: 50px;
right: 50px;
}
@media screen and (max-width: 900px) {
.navbar {
padding: 0;
}
.navbar .logo {
position: absolute;
top: 50px;
left: 50px;
}
.nav-links {
/* display: none; */
top: 0;
left: 0;
position: absolute;
background-color: rgba(146, 189, 202, 0.252);
backdrop-filter: blur(7px);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin-left: -100%;
transition: all 0.8s ease;
}
.nav-links ul {
display: flex;
flex-direction: column;
align-items: center;
}
.navbar .nav-links ul li {
margin: 25px;
font-size: 2em;
}
.navbar .burger-menu {
display: block;
}
}我尝试过其他的解决方案，但是当我尝试的时候，没有一个看起来有效。只是需要一个简单的js代码，因为我是一个初学者，没有什么复杂的，所以我也很怀疑我在这个问题上的知识。（我们不允许使用框架，但是这是必需的，他们还没有教我们如何实现一个汉堡菜单/它被刷过了...）
谢谢任何人尝试和阅读这篇文章。
2条答案
按热度按时间643ylb081#
你会得到一个错误，因为burgermenu是未定义的。这是因为你像
document.querySelector(".burger_menu");这样声明它，用下划线代替了-符号。基本上querySelector找不到那个类的元素，因为"burger_menu" != "burger-menu"。正确的代码应该是：mkshixfv2#
脚本中似乎有一个打字错误，应该用
burger-menu代替burger_menu。请注意下划线和破折号。类名必须完全匹配。HTML代码在
img标记上定义class="burger-menu"，而脚本通过document.querySelector(".burger_menu")查询不存在的类。可能的解决方法是简单地使用
document.querySelector(".burger-menu")。