addEventListener‘of null

Question

我不知道为什么它仍然显示addEventListerner为null，正如您在下面看到的，我添加了window.onload函数。它加载页面，然后再次中断，显示eventListener为空。但是如果我点击页面中的X按钮，错误就会消失，我的页面会返回正常，只是切换图标不能再次点击...意思是事件没有在监听...请您抽出一些时间来帮助我解决这个问题。谢谢

       /*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
    const toggleBtn = document.getElementById(headerToggle),
    nav = document.getElementById(navbarId)
    
    // Validate that variables exist
    window.onload=function(){
    if(headerToggle && navbarId){
        toggleBtn.addEventListener('click', ()=>{
            // We add the show-menu class to the div tag with the nav__menu class
            nav.classList.toggle('show-menu')
            // change icon
            toggleBtn.classList.toggle('bx-x')
        })
    }
 }
}
showMenu('header-toggle','navbar')

/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')

function colorLink(){
    linkColor.forEach(l => l.classList.remove('active'))
    this.classList.add('active')
}

linkColor.forEach(l => l.addEventListener('click', colorLink))

Answer 1

我希望我能正确理解你的问题。如果你得到了Cannot read property 'addEventListener' of null错误，这意味着你要调用这个函数的变量是null，我想它来自toggleBtn.addEventListener('click', ()=>{这一行。确保toggleBtn不是null，您可以在添加侦听器之前使用console.log(toggleBtn);进行检查，然后查看console是否打印了null。const toggleBtn = document.getElementById(headerToggle)可能找不到具有请求id的元素。您还没有提供HTML代码，因此这只是一种猜测。

Answer 2

你的代码结构不好，window.onload应该包装你的代码，而不是相反。此外，如果您在单击时添加一个事件侦听器，您将添加多个事件侦听器，并且您的函数将多次触发。尝试像这样的东西(未测试)

const showMenu = (headerToggle, navbarId) => {
    nav.classList.toggle("show-menu");
    // change icon
    toggleBtn.classList.toggle("bx-x");
};

window.onload = function () {
  const toggleBtn = document.getElementById(headerToggle),
  nav = document.getElementById(navbarId);
  if (headerToggle && navbarId) {
    toggleBtn.addEventListener("click", () => showMenu);
  }
  showMenu("header-toggle", "navbar");
};


/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll(".nav__link");

function colorLink() {
  linkColor.forEach((l) => l.classList.remove("active"));
  this.classList.add("active");
}

linkColor.forEach((l) => l.addEventListener("click", colorLink));