机器人是对的。击败我。
我正在开发一个响应导航栏，除了在我的子菜单中出现一个小的javascript点击甚至错误外，我基本上已经完成了所有工作。
我已经浏览了索引、脚本和样式文件，找不到EventListener在查找指定类时变为null的具体原因。
我正在尝试从中选择一个类的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Uncle Jeffs Pack</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Boxicons CSS -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<nav>
<div class="navbar">
<i class='bx bx-menu'></i>
<div class="logo"><a href="#">UJP</a></div>
<div class="nav-links">
<div class="sidebar-logo">
<span class="logo_name">UJP</span>
<i class='bx bx-x'></i>
</div>
<ul class="links">
<li><a href="#">HOME</a></li>
<li>
<a href="#">PHOTOS</a>
<i class='bx bxs-chevron-down arrow photos-arrow'></i>
<ul class="photos-sub-menu sub-menu">
<li><a href="#">Drop 1</a></li>
<li><a href="#">Drop 2</a></li>
<li><a href="#">Drop 3</a></li>
<li><a href="#">Drop 4</a></li>
<li class="more">
<a href="#">More</a>
<i class='bx bxs-chevron-right arrow more-arrow'></i>
<ul class="more-sub-menu sub-menu">
<li><a href="#">Drop 1</a></li>
<li><a href="#">Drop 2</a></li>
<li><a href="#">Drop 3</a></li>
<li><a href="#">Drop 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">BLOGS</a>
<i class='bx bxs-chevron-down arrow blogs-arrow'></i>
<ul class="blogs-sub-menu sub-menu">
<li><a href="#">Drop 1</a></li>
<li><a href="#">Drop 2</a></li>
<li><a href="#">Drop 3</a></li>
<li><a href="#">Drop 4</a></li>
</ul>
</li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<div class="search-box">
<i class='bx bx-search-alt-2'></i>
<div class="input-box">
<input type="text" placeholder="Search...">
</div>
</div>
</div>
</nav>
<div class="main-paragraph">
<h2>Hello World</h2>
</div>
<script src="script.js"></script>
</body>
</html>
当我将以下代码应用于我的script.js时，我在控制台中收到一个错误：无法读取null的属性(读取'addEventListener(
let navbar = document.querySelector(".navbar");
let searchBox = document.querySelector(".search-box .bx-search-alt-2");
//<i class='bx bx-x'></i>
searchBox.addEventListener("click", ()=>{
navbar.classList.toggle("showInput");
if(navbar.classList.contains("showInput")){
searchBox.classList.replace("bx-search-alt-2","bx-x");
}else {
searchBox.classList.replace("bx-x", "bx-search");
}
});
// sidebar open close js code
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let closeOpenBtn = document.querySelector('.nav-links .bx-x');
let navLinks = document.querySelector(".nav-links");
menuOpenBtn.addEventListener("click", ()=>{
navLinks.style.left="0";
});
closeOpenBtn.addEventListener("click", ()=>{
navLinks.style.left="-100%";
});
经过一些研究，我了解到这可能是由于在DOM完全加载之前运行的脚本造成的。这就是为什么我添加了"；window.onload=函数(("但即便如此，我仍然无法让它发挥作用。感谢您的帮助。再次感谢。
".photos-arrow"