为什么getElementById返回null [重复]

Question

这个问题在这里已经有了答案：

为什么 jQuery 或 getElementById 等 DOM 方法找不到元素？ (6 个回答)

去年关闭。

当我按下图像时，我想将 class 添加到另一个 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");
    }
});

在 Firefox 上，当我将 addEventListener 添加到元素时，我得到 TypeError: hamburger is null。 有什么建议么？

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>