卡在这个错误中：Uncaught TypeError: Cannot read property
我开始尝试在 VS Code 中编写某种东西，我想我可以尝试制作一个移动 GUI，但由于 JavaScript 中的一些错误，我无法打开菜单（从第 230 行开始，问题在行238）：
未捕获的类型错误：无法读取 HTMLDivElement 处 null 的属性“classList”。<anonymous>
我知道发生了什么，但我不知道如何让它发挥作用。
这是我到目前为止编写的脚本：
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav_links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
<!DOCTYPE html>
<html>
<head>
<title>TESTE 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<header>
<img class="logo" src="Logo.jpg" alt="logo" width="80px" height="45px"><img>
<div class="name">
<h4 class="name"> </h4>
</div>
<nav>
<ul class="nav__links">
<li>
<a href="Projects.html">Proiecte</a>
</li>
<li>
<a href="About.html">Despre</a>
</li>
<li>
<a href="Pagini.html">Pagini</a>
</li>
<li>
<a href="test_2.html">Acasa</a>
</li>
</ul>
<div class="burger">
<div class="burger1"></div>
<div class="burger2"></div>
<div class="burger3"></div>
</div>
</nav>
<a class="buton_nav" href="Contact.html">Contact</a>
</header>
</head>
<body>
<p>Text to test selection colors</p>
<div class="div1">
<a button class="Buton_YT" href="#" target="_blank">Buton YT</a>
</div>
</body>
</html>
牧羊人nacy1回答
-
侃侃无极
<html> <head><title>TESTE 2</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"); .Buton_YT { font-size: 34px; padding: 5px 10px; border: 3px solid #000000; border-radius: 5px; text-decoration: none; display: inline-block; color: #09ff00; transition-duration: 0.2s; background-color: none; width: 120px; text-align: center; cursor: none; position: absolute; top: 30px; font-family: "arial", cursive; } ::selection { color: white; background-color: rgb(60, 255, 0); } .Buton_YT:hover { color: #ffffff; background-color: #ff0000; box-shadow: 5px #000000; } .Buton_YT:active { transition-duration: 100ms; background-color: #ff0000; box-shadow: 0 5px rgb(20, 20, 20); transform: translateY(4px); } .div1 { width: 500; height: 100; color: #00ffff; display: inline-block; position: absolute; } * { box-sizing: border-box; margin: 0px; padding: 0px; background-color: #333333; } li, a, .Buton_YT { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 18px; color: #edf0f1; text-decoration: none; justify-content: end; } header { display: flex; justify-content: space-between; align-items: center; padding: 3px 1%; border: black 2px solid; background-color: #202020; } nav { background-color: #202020; } .logo { cursor: not-allowed; margin-right: auto; } /*.name { cursor: not-allowed; margin-right: flex-end;}*/ .nav__links { list-style: none; background-color: #202020; } .nav__links li { display: inline-block; padding: 0px 20px; background-color: #202020; } .nav__links li a { transition-delay: 500ms; transition: all 0.2s ease 0s; background-color: #202020; } .nav__links li a:hover { color: rgba(0, 128, 160, 0.6); } .nav__links li a:active { color: rgba(0, 136, 169, 0.1); transition: all 0.001s ease 0s; } .buton_nav { padding: 9px 20px; background-color: rgba(0, 136, 169, 1); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; } .buton_nav:hover { background-color: rgba(0, 128, 160, 0.6); transition: all 0.1s ease 0s; } .buton_nav:active { background-color: rgba(0, 136, 169, 0.3); } .burger { display: none; cursor: pointer; } .burger div { width: 25px; height: 3px; background-color: rgb(255, 255, 255); margin: 5px; border-radius: 10px; color: #202020; } @media screen and (max-width: 720px) { body { overflow-x: hidden; } .nav__links { position: absolute; right: 00px; height: 92vh; top: 54.5px; background-color: #202020; display: flex; flex-direction: column; align-items: center; width: 150px; transform: translateX(100%); line-height: 110px; transition: transform 0.5 ease-in; } .nav__links li { opacity: 30%; } .burger { display: block; background-color: #202020; } } .nav-active { transform: translateX(0px); }</style> </head> <body> <header> <img class="logo" src="Logo.jpg" alt="logo" width="80px" height="45px" /><img /> <div class="name"> <h4 class="name"></h4> </div> <nav> <ul class="nav__links"> <li> <a href="Projects.html">Proiecte</a> </li> <li> <a href="About.html">Despre</a> </li> <li> <a href="Pagini.html">Pagini</a> </li> <li> <a href="test_2.html">Acasa</a> </li> </ul> <div class="burger"> <div class="burger1"></div> <div class="burger2"></div> <div class="burger3"></div> </div> </nav> <a class="buton_nav" href="Contact.html">Contact</a> </header> <p>Text to test selection colors</p> <div class="div1"> <a button class="Buton_YT" href="#" target="_blank">Buton YT</a> </div> <script> const navSlide = () => { const burger = document.querySelector(".burger"); const nav = document.querySelector(".nav__links"); burger.addEventListener("click", () => { nav.classList.toggle("nav-active"); }); }; navSlide(); </script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript