javascript - 无法读取 null 的属性 'classList'

Question

首先，对不起我的英语，但是你能告诉我我做错了什么吗？ 错误:

Uncaught TypeError: Cannot read property 'classList' of null

// get 'hamburger' class from html
const hamburger = document.querySelector('.hamburger');

// handle click on hamurger and add class 'hamburger-active' to it
function handleClick(){
    hamburger.classList.toggle('hamburger-active');
}

Answer 1

未找到类名为 .hamburger 的元素，因此变量 hamburger 为 null。由于该变量为 null，因此您无法读取其 classList 属性(null 值没有任何属性)。

要修复此错误，请确保当代码的第一行 (const hamburger = document.querySelector('.hamburger' );) 已运行。您可以将 console.log(hamburger); 添加到下一行来检查变量的值。

您还可以在尝试切换类 hamburger-active 之前检查变量是否为 null:

function handleClick(){
    if (hamburger !== null){
        hamburger.classList.toggle('hamburger-active');
    }
}