为什么getElementById返回null

Question

当我按下图像时，我想将一个类添加到另一个HTML元素中。

HTML :

<img src="images/hamburger_menu.svg" alt="Hamburger menu" class="header__hamburger" id="hamburger-menu">

JAVASCRIPT :

var navigation_bar = document.getElementById('nav');
var isChecked = false;
var hamburger = document.getElementById("hamburger-menu");

hamburger.addEventListener("click", function(){
    if(!isChecked){
        navigation_bar.classList.add("show");
    }
});

在火狐上，我得到了TypeError:当我向元素中添加addEventListener时，汉堡包是空的。有什么建议吗？

Answer 1

必须在元素创建后添加事件侦听器。因此，使用window.onload：

​

window.onload = function(){
    var navigation_bar = document.getElementById('nav');
    var isChecked = false;
    var hamburger = document.getElementById("hamburger-menu");

    hamburger.addEventListener("click", function(){
        if(!isChecked){
            navigation_bar.classList.add("show");
            console.log("ok")
        }
    });
}

<img src="images/hamburger_menu.svg" alt="Hamburger menu" class="header__hamburger" id="hamburger-menu">
<div id = 'nav'>nav</div>

​