用于多个页面和按钮的addEventListener

Question

I'm way too used to working in react and components so doing this all in vanilla JS makes my brain go blank some times.

I have a website with multiple pages/URLs. Certain pages have unique styles that users interact with.

I have a single file script.js . I get elements with document.getElementsByClassName , I then use an addEventListener for 'clicks' and what not. When I only worked on one page I never noticed that when I started building out the second page the script breaks because it can't find the element (which was on the previous page).

This does make sense but how do you work around this? My entire script is encapulslated with window.onload .

For example,

Page1.html

<button class="first"> Click me </button>

Page2.html

<button class="second"> Click me </div>

Scrip.js

var buttonOne = document.getElementsByClassName("first")[0];
var buttonTwo = document.getElementsByClassName("second")[0];

buttonOne.addEventListener('click',function(){
        firstFun(); 
})

buttonTwo.addEventListener('click',function(){
        secondFun(); 
})

function firstFun () { .. }
function secondFun () { .. }

In which this script wouldn't work because it would break trying to find the element and adding the event listener.

Answer 1

Another solution can be to add onclick event to the buttons, like below

<button onclick="myFunction()">Click me</button>.

And define the function in js fie.

Answer 2

As @epascarello mentioned the solution is simple.

Wrap the event listeners in an if (element) statement.