Why is getElementById returning null

Question

When I press on an image I want to add a class to another HTML element.

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

On Firefox I get TypeError: hamburger is null when I add addEventListener to the element. Any suggestions?

Most likely the problem: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — VLAZ, Apr 26 '20 at 14:43

Nilanka Manoj · Accepted Answer · 2020-04-26T15:05:03.980

You have to add the event listener after the element is created. So, use 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>

Why is getElementById returning null

1 Answers1

Linked