我已經在 html 下鏈接了正文內的 JS 文件，這仍然是 Uncaught TypeError: Cannot read property 'addEventListener' of null

Question

我在 StackOverflow 中看到過類似的問題，他們都建議使用windows.onload並將 JS 放在 HTML 下，但問題仍然存在。 有時在遵循一些解決方案后，我會收到類似的錯誤

加載資源失敗：net::ERR_FILE_NOT_FOUND loading json.js

請幫忙。 謝謝你。

 window.onload = function() { const toggleButton = document.querySelector('toggle-button') const navbar = document.querySelector('navbar') toggleButton.addEventListener('click', () => { navbar.target.classlist.toggle('active') }) }

 @media screen and (max-width: 720px) {.navbar { display: none; width: 100%; }.navbar.active{ display: flex; background-color: black; height: 100vh; }.toggle-button{ display: flex; }.flex{ flex-direction: column; }.navbar ul{ width: 100%; flex-direction: column; }.navbar li{ margin-top: 5rem; padding: 0; }.navbar li a{ padding: 0; font-size: 15px; text-transform: uppercase; }.navbar a:after { display: none; } }

 <section class="nav"> <div class="container flex"> <div class="logo"> <img src="images/desktop/logo.svg" alt=""> </div> <a href="#" class="toggle-button"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> <div class="navbar"> <ul> <li><a href="#">About</a> </li> <li><a href="#">Careers</a></li> <li><a href="#">Events</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> </ul> </div> </div> <div class="container"> <div class="hero-text"> <h1>IMMERSIVE <br> EXPERIENCES <br> THAT DELIVER</h1> </div> </div> </section>

Answer 1

toggle-button是a標簽的類名，你應該添加. 表示 class。

const toggleButton= document.querySelector('.toggle-button')
                                            ^ add "." here

Answer 2

如果您使用的是 querySelector，您需要指定您要查找的內容是 class 還是 id。 在你的情況下，因為它是 class.toggle-button 正確的方法是

document.querySelector('.toggle-button')

但如果您要查找的目標有一個同名的 id，它將是

document.querySelector('#toggle-button')

似乎你也對導航欄做了同樣的事情..所以你也必須改變它..

我注意到的另一件事是您使用了我認為可能是錯誤的 classlist 道具，而不是應該是正確的 classList 道具。

navbar.target.classList.toggle navbar.target.classList.toggle('active')中的 the.target 是不必要的，只會給你一個錯誤，因為你還沒有將事件傳遞到 function。 所以這也要改變..

無論如何..

最后結果

最終結果看起來像這樣......它似乎正在工作，但如果這是你需要的預期結果，我知道......

 window.onload = function() { const toggleButton = document.querySelector('.toggle-button') const navbar = document.querySelector('.navbar') toggleButton.addEventListener('click', () => { navbar.classList.toggle('active') }) }

 @media screen and (max-width: 720px) {.navbar { display: none; width: 100%; }.navbar.active { display: flex; background-color: black; height: 100vh; }.toggle-button { display: flex; }.flex { flex-direction: column; }.navbar ul { width: 100%; flex-direction: column; }.navbar li { margin-top: 5rem; padding: 0; }.navbar li a { padding: 0; font-size: 15px; text-transform: uppercase; }.navbar a:after { display: none; } }

 <section class="nav"> <div class="container flex"> <div class="logo"> <img src="images/desktop/logo.svg" alt=""> </div> <a href="#" class="toggle-button"> <span class="bar">y</span> <span class="bar">o</span> <span class="bar">u</span> </a> <div class="navbar"> <ul> <li><a href="#">About</a> </li> <li><a href="#">Careers</a></li> <li><a href="#">Events</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> </ul> </div> </div> <div class="container"> <div class="hero-text"> <h1>IMMERSIVE <br> EXPERIENCES <br> THAT DELIVER</h1> </div> </div> </section>

我是編碼新手，所以如果我犯了任何錯誤很抱歉，你能指出它們嗎？ 謝謝。

Answer 3

您必須定義要訪問的選擇器類型。 使用這個const toggle = document.querySelector('.toggle-button') 。

在此處查找有關 querySelector 的更多信息https://www.w3schools.com/jsref/met_document_queryselector.asp