“Uncaught TypeError: Cannot read property 'addEventListener' of null”
Question
I tried to make a nav opener with some dots HTML and CSS working fine but the script does not work properly. any help is very much appreciated.
My Code:
const burger = document.querySelector(".burger"); const navLinks = document.querySelector(".item-menu"); const links = document.querySelectorAll(".list"); burger.addEventListener("click", () => { navLinks.classList.toggle("open"); });
* { margin: 0px; padding: 0; } body { font-family: cursive, sans-serif, fantasy; background-color: #f3f3f4 } nav { height: 12vh; background-color: #0303; display: block; } .item-menu { display: flex; list-style: none; justify-content: space-around; align-items: center; width: 50%; height: 100%; margin-left: auto; cursor: pointer; } .a /* menu words */ { text-decoration: none; list-style: none; color: black; } /*---------------------------------PHONE---------------------------------*/ @media only screen and (max-width: 750px) { /* BURGER NAV DOTS */ .dot { float: right; display: block; height: 25px; width: 25px; border-radius: 50%; } #burger:hover { cursor: pointer; } #burger:hover .dot:nth-child(1) { box-shadow: 0 0 10px #fff900; } #burger:hover .dot:nth-child(2) { box-shadow: 0 0 10px #08ff28; } #burger:hover .dot:nth-child(3) { box-shadow: 0 0 10px #ff005a; } #burger:hover .dot:nth-child(4) { box-shadow: 0 0 10px #3896ff; } /* DOTS */ #burger .dot:nth-child(1) { background-color: #fff900; animation: animate 2s linear inifinite; } #burger .dot:nth-child(2) { background-color: #08ff28; animation: animate 2s linear inifinite; } #burger .dot:nth-child(3) { background-color: #ff005a; animation: animate 2s linear inifinite; } #burger .dot:nth-child(4) { background-color: #3896ff; animation: animate 2s linear inifinite; } #burger { position: absolute; cursor: pointer; right: 5%; top: 50%; transform: translate(-5%, -50%); z-index: 2; width: 50px; height: 50px; } nav { position: relative; } .item-menu { position: fixed; top: 2%; left: -5%; height: 85vh; width: 100%; clip-path: inset(0px 0px 692px 612px); -webkit-clip-path: inset(0px 0px 692px 612px); pointer-events: none; cursor: pointer; display: flex; width: 84%; height: 84%; transition: all 1s ease-out; align-items: center; } .a { position: absolute; top: 3%; } .item-menu.open { clip-path: inset(0px 0px 692px 0px); -webkit-clip-path: inset(0px 0px 692px 0px); transition: all 1s ease-out; pointer-events: all; } }
<!DOCTYPE html> <html> <head> <title> BURGER NAV </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--STYLESHEET--> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <nav> <div id="burger"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <ul class="item-menu"> <li class="list"><a class="a" href=""> Home </a></li> <li class="list"><a class="a" href=""> Portfoglio </a></li> <li class="list"><a class="a" href=""> Experiences </a></li> <li class="list"><a class="a" href=""> About me </a></li> <li class="list"><a class="a" href=""> Contact </a></li> </ul> </nav> </body> </html>
My problem:
Well, it looks like the button does not work properly and I don't understand why. They told me the script is not loaded and to put it at the end of the body and already was. I tried to change some classes, to add more classes, to do a function....nothing of the above worked...
Please I need help...I'm almost on the point of a breakdown :)) =)) Maybe coding is not for me :X
2 answers
solution1
3 ACCPTED 2019-05-06 22:40:58
in the querySelector of 'burger' set it to const burger = document.querySelector("#burger"); it's an id so we use '#' the dot '.' is for the class
solution2
2 2019-05-06 22:51:56
HTML DOM querySelector() Method returns the first element that matches a specified CSS selector(s) in the document. So for getting elements by Id you should use HTML DOM getElementById() Method returns the element that has the ID attribute with the specified value.
const burger = document.getElementById("burger");
const navLinks = document.querySelector(".item-menu");
const links = document.querySelectorAll(".list");
burger.addEventListener("click", () =>
{
navLinks.classList.toggle("open");
});
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.