javascript - 如何处理 “main.js:11 Uncaught TypeError: Cannot read property ' addEventListener的“null”这样的错误？

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 Uncaught TypeError: Cannot read property 'addEventListener' of null at main.js:11

请说明如何解决

Answer 1

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

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

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