Cannot read property addEventListener of null

0 votes

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?

Apr 29, 2022 in Other DevOps Questions by Kichu
• 19,050 points
2,033 views

1 answer to this question.

0 votes

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.

answered May 1, 2022 by narikkadan
• 63,680 points

Related Questions In Other DevOps Questions

0 votes
1 answer

Use vagrant to update $PATH of guest vm

Just try the below script: mvm.vm.provision :shell, :inline ...READ MORE

answered May 1, 2018 in Other DevOps Questions by shubham
• 7,340 points
1,172 views
0 votes
1 answer

Python-based project of salt stack

you can use python instead of yaml, ...READ MORE

answered Jun 5, 2018 in Other DevOps Questions by ajs3033
• 7,300 points
709 views
0 votes
1 answer

sonar property file & Analysis properties are getting exclusion in them

I think following things should be kept ...READ MORE

answered Jun 5, 2018 in Other DevOps Questions by Damon Salvatore
• 5,980 points
1,919 views
0 votes
1 answer

How to get results of SonarQube?

You can use sonarqube quality gates which ...READ MORE

answered Jun 8, 2018 in Other DevOps Questions by ajs3033
• 7,300 points
3,030 views
0 votes
1 answer

What is a name function in JavaScript & how to define it?

A named function declares a name as ...READ MORE

answered Mar 7, 2019 in Others by Frankie
• 9,830 points
4,652 views
0 votes
1 answer

jQuery 'if .change() or .keyup()'

you can bind to multiple events by ...READ MORE

answered Jun 20, 2022 in JQuery by rajatha
• 7,680 points
2,595 views
0 votes
0 answers

Javascript call() & apply() vs bind()?

I am already aware that the functions ...READ MORE

Sep 22, 2022 in Java-Script by Tejashwini
• 3,820 points
540 views
0 votes
0 answers

Javascript call() & apply() vs bind()?

I'm already aware that apply and calls are functions that do the same thing (context of a function). The distinction is in how we communicate the arguments (manual vs array). When should I, however, utilize the bind() method? var obj = { x: ...READ MORE

Sep 22, 2022 in Java by Nicholas
• 7,760 points
543 views
0 votes
1 answer

Can't bind to 'ngModel' since it isn't a known property of 'input'

Just add this in the app.module.ts file: import { FormsModule ...READ MORE

answered Apr 30, 2022 in Other DevOps Questions by narikkadan
• 63,680 points
4,381 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP