javascript - 遇到此错误:未捕获的 TypeError:无法在 HTMLDivElement 处读取 null 的属性“classList”。
问题描述
我开始尝试在 VS Code 中写一些东西,我想我可以尝试制作一个移动 GUI,但是由于 JavaScript 的一些错误,我无法打开菜单(从第 230 行开始,问题在行238):
未捕获的类型错误:无法在 HTMLDivElement 读取属性“classList”的空值。<匿名>
我知道发生了什么,但我不知道如何让它发挥作用。
到目前为止,这是我编写的脚本:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav_links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
@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);
}
<!DOCTYPE html>
<html lang="en">
<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>
解决方案
<html lang="en">
<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>
推荐阅读
- swift - 一行中的连续声明必须用';'分隔 迅速
- windows - 仅在不在家时启动时的 OpenVPN 连接 (Windows)
- probability - 使用 Google AutoML 表进行概率(置信度)估计
- javascript - 如果我在 for 循环中调用包含 for 循环的函数,那是 O(n^2) 时间还是 O(n)?
- r - 了解 dplyr 和 group_by
- oracle - ORA-01841 在 where 子句中应用日期条件时出错
- reactjs - 是否可以在 React 中将 React 组件作为 backgroundImage url 提供?
- react-native - 单击深层链接时防止 react-native-webview 打开另一个应用程序
- continuous-integration - GitHub Actions 在推送到所有分支时运行
- django - UnboundLocalError at /Tag/HTC-Phones/ 分配前引用的局部变量'tag' - Django