CODEWITHSUNDEEP
javascripthtmleventsonclick
Kwasi
Kwasi

Reputation: 31

How to combine multiple onclick actions?

I have two sliders on a page, each with their own pagination, is there a way to combine these two onclick actions, so I have a global one which controls both sliders?

<a href="#" onClick="(function(){slider_image.goToSlide(<?php echo $slide++; ?>);return false;})();return false;">

<a href="#" onClick="(function(){slider_copy.goToSlide(<?php echo $slide++; ?>);return false;})();return false;">

Upvotes: 2

Views: 95

Answers (1)

benvc
benvc

Reputation: 15120

You can't add a single event listener to multiple elements (with vanilla js), but you can consolidate your code a bit using a loop and addEventListener (rather than embedding onclick handlers in your html). You could also attach the event listener elsewhere in the DOM hierarchy and catch the event as it bubbles up, but hard to know if that would work well in your situation without seeing more of the html. Example using a loop and addEventListener:

const links = document.querySelectorAll('a');
for (const link of links) {
  link.addEventListener('click', (event) => {
    // your click function here
  });
}

Upvotes: 2

Related Questions