Cannot read property addEventListener of null

Question

I am using vanilla JavaScript and I have a few functions, one of them is a button that opens up the menu. It works with pages that have the target ids and doesn't work on the ones that don't.
The code for the button that opens the menu.

function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);

var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};

How do I deal with this?

Answer 1

Just check that el is not null before adding an event listener:

var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}

I hope this helps.