I am working on a responsive navigation bar and have basically gotten everything to work besides a small javascript click even error im getting in my sub menu.
I have gone through my index, script, and style files and cannot find a specific reason why EventListener is getting null when looking for the specified class.
The HTML code i am trying to select a class from:
<!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>
When i apply the following code to my script.js i get an error 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");
//<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%";
});
After doing some research i understand this could be due to the script running before the DOM is fully loaded. That is why i added "window.onload=function()" but even with that i still cannot get it to work. Any help is appreciated. Thanks again.
Robo Robok is right. Beat me to it. ".photos-arrow"