I have a simple click function in Javascript that I am trying to get to work. The issue I am having is that the click function is only working for the first element with the class, where I would like it to fire when you click any elements with the class.

const element = document.querySelector('.js-element')
if ( element ) element.addEventListener('click', function () {
    alert('click');
})

Can anyone please advise where I am going wrong?

Thanks

I have a simple click function in Javascript that I am trying to get to work. The issue I am having is that the click function is only working for the first element with the class, where I would like it to fire when you click any elements with the class.

const element = document.querySelector('.js-element')
if ( element ) element.addEventListener('click', function () {
    alert('click');
})

Can anyone please advise where I am going wrong?

Thanks

• javascript
• function
• click

• You used querySelector. That means you selected a single element and added a listener to that one element. Either use querySelectorAll and add a listener to each element, or add a listener to the container (or the body) and use event delegation – CertainPerformance Commented Jun 11, 2018 at 8:14
• ...then you just need querySelectorAll(), you can .forEach() on the result. – Adriano Repetti Commented Jun 11, 2018 at 8:15
• because querySelector only select the first one. – Terry Wei Commented Jun 11, 2018 at 8:17

2 Answers 2

The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

To attach event to all the element with class js-element you have to select all the element using querySelectorAll() and then use loop to iterate and attach event like the following.

Also, you do not need the if condition here.

const element = document.querySelectorAll('.js-element')
element.forEach(function(el){
  el.addEventListener('click', function () {
    alert('click');
  });
});

Use querySelectorAll()

 const element = document.querySelectorAll('.js-element');
    if (element.length !== 0) {
      for (var i=0; i<element.length; i++) {
        element[i].addEventListener('click', function () {
          alert('click');
        });
      }
    }

The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.