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
790 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
• 53,160 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
605 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
397 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,232 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
2,499 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
2,259 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,480 points
164 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,470 points
112 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
113 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
• 53,160 points
1,465 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