how to solve uncaught typeError - cannot read property 'addEventListener' of null
Question
when i ever i click on the burger element nothing happens
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="GNG.js"></script>
<link rel="stylesheet" href="stylesheet/style.css">
<title>GnG</title>
</head>
<body>
<nav>
<div class="navbar-brand">
George n George
</div>
<!-- <a class="navbar-brand" href="#"></a> -->
<ul class="nav-links">
<li class= "nav-active" ><a href="#">Home </a></li>
<li ><a href="#">Contact</a> </li>
<li ><a href="#">About us</a></li>
<li ><a href="#">Laundry</a></li>
<li ><a href="#">Clothes </a></li>
<li ><a href="#">Business</a></li>
</ul>
<div class="burger">
<div class="_line1"></div>
<div class="_line2"></div>
<div class="_line3"></div>
</div>
</nav>
</body>
</html>
my css file
/*======================== styling the navbaar==========================*/
.burger div{
width: 25px;
height: 1px;
background-color: whitesmoke;
margin: 5px;
}
.burger{
display: none;
cursor: pointer;
}
@media screen and (max-width: 1024px){
.nav-links{
width: 40%
}
}
@media screen and (max-width: 600px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: rgb(21, 19, 43);
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
transform: translateX(100%);
transition: transform 0.9s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%)
}
@keyframes _navLinkFade{
from{
opacity: 0;
transform: translateX(50px)
}
to{
opacity: 1;
transform: translateX(0px)
}
}
/* ======================== navbar end==================================*/
and the javascript
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
// const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () =>
{
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) =>
{
link.style.animations = `navLinkFade 0.5s ease forward ${ index / 7 + 1.5 }s`;
});
});
}
navSlide();
whenever i click on the burger element, the menu should fade in from the right but looking at the console i see the addEventListener is not working. tried other project with the addeventListner and got same error. thinking my browser nneeded update wch i did but to no avail
1 answers
solution1
1
Move your script tag before closing </body> tag or call your function after DOMContentLoaded event;
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
// const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener("click", () => {
nav.classList.toggle("nav-active");
navLinks.forEach((link, index) => {
link.style.animations = `navLinkFade 0.5s ease forward ${index / 7 +
1.5}s`;
});
});
};
document.addEventListener("DOMContentLoaded", navSlide);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to solve Uncaught TypeError: Cannot read property 'addEventListener' of null?
Uncaught TypeError: Cannot read property 'addEventListener' of null?
“Uncaught TypeError: Cannot read property 'addEventListener' of null”
Uncaught TypeError: Cannot read property 'addEventListener' of null
Uncaught TypeError: Cannot read property addEventListener of null
how to fix it: “Uncaught TypeError: Cannot read property 'addEventListener' of null”…?
How to solve the “Uncaught TypeError: Cannot read property 'checked' of null”
Uncaught TypeError: Cannot read property 'addEventListener' of null at window.onload
Uncaught TypeError: Cannot read property 'addEventListener' of null (multiple forms)
app.js:6 Uncaught TypeError: Cannot read property 'addEventListener' of null
Related Tags