“未捕獲的TypeError：無法讀取null的屬性'addEventListener'”

Question

我試圖用一些點HTML和CSS做一個可以輕松導航的導航器，但是腳本不能正常工作。 很感謝任何形式的幫助。

我的代碼：

 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>

我的問題：

好吧，看來該按鈕無法正常工作，我也不明白為什么。 他們告訴我腳本未加載，並將其放在正文的末尾，並且已經加載完畢。 我試圖更改一些類，添加更多的類，做一個函數....以上都不起作用...

請我需要幫助...我快要崩潰了:)）=））也許編碼不適合我：X

Answer 1

在“漢堡”的querySelector中將其設置為const burger = document.querySelector("#burger"); 這是一個ID，因此我們使用'＃'點'。 是上課的

Answer 2

HTML DOM querySelector（）方法返回與文檔中指定的CSS選擇器匹配的第一個元素。 因此，為了通過ID獲取元素，您應該使用HTML DOM getElementById（）方法返回具有ID屬性（具有指定值）的元素。

const burger = document.getElementById("burger");
const navLinks = document.querySelector(".item-menu");
const links = document.querySelectorAll(".list");

burger.addEventListener("click", () => 
{
    navLinks.classList.toggle("open");
});

“未捕獲的TypeError：無法讀取null的屬性'addEventListener'”

問題描述

2 個解決方案

解決方案1
3 已采納 2019-05-06 22:40:58

解決方案2
2 2019-05-06 22:51:56

“未捕獲的TypeError：無法讀取null的屬性&#39;addEventListener&#39;”

問題描述

2 個解決方案

解決方案1 3 已采納 2019-05-06 22:40:58

解決方案2 2 2019-05-06 22:51:56

“未捕獲的TypeError：無法讀取null的屬性'addEventListener'”

解決方案1
3 已采納 2019-05-06 22:40:58

解決方案2
2 2019-05-06 22:51:56