In the process of creating a responsive navigation bar, everything seems to be functioning correctly except for a small javascript error that arises in my sub menu when clicking.
Despite thoroughly checking through my index, script, and style files, I am unable to pinpoint why the EventListener is returning null when trying to locate the specified class.
The HTML code from which I am attempting to select a class:
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8effef4f8f9e4d7a5b9a6b9a3">[email protected]</a>/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>
When implementing the following code into my script.js file, an error appears in the console: Cannot read properties of null (reading 'addEventListener)
let navbar = document.querySelector(".navbar");
let searchBox = document.querySelector(".search-box .bx-search-alt-2");
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%";
});
Following some research, I have discovered that this issue may occur due to the script running before the DOM is fully loaded. I have attempted using "window.onload=function()" but the problem persists. Any assistance would be greatly appreciated. Thank you.