Want to add “addEventListener” on multiple elements with same class [duplicate]

by

You need to use querySelectorAll which will return a collection.Now use spread operator (three dots) to convert it to array and use forEach .Inside forEach callback add the event listener to it

[...document.querySelectorAll('.breakdown')].forEach(function(item) {
  item.addEventListener('click', function() {
    console.log(item.innerHTML);
  });
   });
<button id='btn-1' type="button" name="first" class="breakdown main-text"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" disabled> Breakdown Ended </button>

In your snippet you have also attached inline event handler,that may not be necessary.

If the objective is to enable the next button then a function to enable it can be called from the callback function of the event handler

More Related Contents:

  1. How to trigger event in JavaScript?
  2. How to make JavaScript execute after page load?
  3. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  4. add event listener on elements created dynamically
  5. How can I capture the right-click event in JavaScript? [duplicate]
  6. How to make HTML element resizable using pure Javascript?
  7. What are passive event listeners?
  8. How to check whether dynamically attached event listener exists or not?
  9. HTML input file selection event not firing upon selecting the same file
  10. How to pass parameter to function using in addEventListener?
  11. Javascript trick for ‘paste as plain text` in execCommand
  12. Pass mouse events through absolutely-positioned element
  13. Open popup and refresh parent page on close popup
  14. Why Firefox says that window.event is undefined? (call function with added event listener)
  15. adding multiple event listeners to one element
  16. Ignore mouse interaction on overlay image
  17. Why don’t audio and video events bubble?
  18. Checkbox Check Event Listener
  19. HTML DOM: Which events do not bubble?
  20. Handling “onclick” event with pure JavaScript
  21. Looping through files for FileReader, output always contains last value from loop
  22. event.clipboardData.setData in copy event
  23. Reload an HTML page just once using JavaScript
  24. reactjs event listener beforeunload added but not removed
  25. Use JavaScript to intercept all document link clicks
  26. How to execute code in a javascript append
  27. Are dynamically inserted tags meant to work?
  28. Display Spreadsheet Data to HTML Table
  29. Display Spreadsheet Data to HTML Table
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment