Question

是否存在任何错误或导致空值错误的变量

    // Select DOM Items
const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');
const menuNav = document.querySelector('.menu-nav');
const menuBranding = document.querySelector('.menu-branding');
const navItems = document.querySelectorAll('.nav-item');

// Set Initial State Of Menu
let showMenu = false;

menuBtn.addEventListener("click", toggleMenu);

function toggleMenu() {
    if (!showMenu) {
        menuBtn.classList.add('close');
        menu.classList.add('show');
        menuNav.classList.add('show');
        menuBranding.classList.add('show');
        navItems.forEach(item => item.classList.add('show'));

        // Set Menu State
        showMenu = true;
    } else {
        menuBtn.classList.remove('close');
        menu.classList.remove('show');
        menuNav.classList.remove('show');
        menuBranding.classList.remove('show');
        navItems.forEach(item => item.classList.remove('show'));

        // Set Menu State
        showMenu = false;
    }
}

此处menuBtn.addEventLister显示此错误：

main.js：11未捕获的TypeError：无法读取属性'addEventListener' 的null 在main.js：11

请说明如何解决

Answer 1

querySelector返回null，因为您的DOM中没有类.menu-btn的元素

您可以通过在添加事件之前测试变量menuBtn来捕获错误

menuBtn && menuBtn.addEventListener("click", toggleMenu);

如何处理“ main.js：11未捕获的TypeError：无法读取null的属性'addEventListener'”这样的错误？

1 个答案: