为什么getElementById返回null | 为什么getElementById返回null

本文介绍了为什么getElementById返回null的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

HTML：

 < img src = images / hamburger_menu.svg alt =汉堡菜单 class = header__hamburger id =汉堡菜单>

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上，我收到TypeError：将addEventListener添加到元素时，汉堡包为null。

解决方案

您必须在创建元素后添加事件侦听器。因此，使用 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 =汉堡菜单 class =  header__hamburger id = hamburger-menu>< div id ='nav'> nav< / div>

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"); } });

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") } }); }