Event handlers fail, depending on what order they appear and which html page is loaded

1

I have two html pages, ‘who.html’ and ‘hi.html’

They each have a button and the event handler for each button is in a separate .js file. All either button does is print “hello world.”

So, if the event handler for ‘who.html’ appears FIRST on the .js page, and I begin testing by entering the url for ‘who.html’ into the browser, when I click the button I get “Hello World”, which is fine.

But if I then enter the url for ‘hi.html’ into the browser, the ‘hi.html’ page loads just fine BUT its button does not work when clicked!

When I then look at console, it says “Uncaught TypeError: Cannot read property ‘addEventListener’ of null” for the listener for the ‘who.html’ page!! (remember, it is the ‘hi.html’ page that is now loaded, so the system is saying that ‘who.html’ is null.)

If I reverse the order of the event listeners on the .js page and load up the ‘hi.html’ page, its button begins working but if I go back to the ‘who.html’ page, its but now no longer works.

How can I address this, as that .js page eventually will have to support a whole bunch of event handlers?

Here is the git repo:

2

If I understand you correctly, you have two HTML pages and two external JS files.

Your who.html page should have script tags for the who.js file only.
Your hi.html page should have script tags for the hi.js file only.
In other words, don’t reference the hi.js file on the who.html page at all; don’t reference the who.js file on the hi.html page.

1 Like
3

No, I have two HTML pages and but only ONE external JS file. That one external JS file is getting loaded up with everyone’s scripts.

Could that be the source of the problem?

(I am still relatively new to coding. This is actually the first application of this complexity that I have written in JS and the first time I have ever put scripts in a separate JS file rather than just leaving them as a script tag right on the HTML page)

4

Yup, that was it! Thanks!!!

5

Yes, you need a separate .js file for each page - at least, I don’t know how else to keep the pages’ event listeners from interfering with one another. Glad it worked!

6

Solution

'use strict';

(function () {

  var goWho = document.querySelector('.btn-clickMe');
  var clickMe = document.querySelector('.btn-clickMe1');

  /*
    You should check if goWho and clickMe exists in the DOM and is not null
    before binding the events listeners
  */

  if (clickMe) {
    clickMe.addEventListener("click", function(){
      document.getElementById("demo1").innerHTML = "Hello World";
    }, false);
  }

  if (goWho) {
    goWho.addEventListener("click", function(){
      document.getElementById("demo").innerHTML = "Hello World";
    }, false);
  }

})();

and if you don’t like using if statements you could use the code below it should work

clickMe && clickMe.addEventListener("click", function(){
  document.getElementById("demo1").innerHTML = "Hello World";
}, false);

goWho && goWho.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World!!!";
}, false);

Keep it up :wink:

1 Like