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

Question

I\'d like to perform the logic in the \"onClick\" through the event listener in jS but it only seems to run once? I have the class in all four but I can\'t figure out why it

Answer 1

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);
  });
   });

 Breakdown Start 
 Repair Start 
 Repair End 
 Breakdown Ended 

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