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
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.
It looks like querySelectorAll only targets the visible elements - No, it targets all elements that are physically in the DOM, visible or not. If you think it doesn't return hidden elements, create a jsFiddle or similar test sample and console.log() the innerText of each element or similar inside your loop to see that elements with display:none are included. - https://jsfiddle.net/qpkt0nuf/ Change as needed to test your own scenario.
querySelector. That means you selected a single element and added a listener to that one element. Either usequerySelectorAlland add a listener to each element, or add a listener to the container (or the body) and use event delegationquerySelectorAll(), you can.forEach()on the result.