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: