If you've ever worked in vanilla Javascript, you might be familiar with adding event listeners to elements using the following formula: let element = document.querySelector('#button'); element.addEventListener('click', () => { console.log('some event content here...') }) The above code will, of course, trigger a function that fires when is fired. Sometimes, though, you need to add an event listener to multiple elements - say, every button that exists on a page. You might have found that even if you have multiple elements on a page, the above approach only adds your event to one element - the first one. What gives? #button The issue is is only good for adding an event to one DOM element - and only matches one element too. So how do you add an event listener to multiple elements on a page? Let's look at the solution. addEventListener querySelector Adding Event Listeners to Multiple Elements Instead of using , we're going to use to match all elements on our page. The following code returns an item of type , consisting of all DOM elements matching . , we're going to need to loop through every matched element from our , and add events to each: querySelector querySelectorAll NodeList .button To add events to every element querySelector let elements = document.querySelectorAll('.button'); Javascript is weird because it doesn't return DOM elements as a simple array - it returns them as a . . NodeList If you want to learn about NodeLists in more detail, read my guide on that here In modern browsers, s behave a lot like arrays, so we can use to loop through each. To add an event to each then, we need to loop through it using . So adding a event to all elements looks like this: NodeList forEach .button forEach click .button let elements = document.querySelectorAll('.button'); elements.forEach((item) => { item.addEventListener('click', () => { console.log('some event content here...') }) }); , in older browsers like Internet Explorer, doesn't exist on s. Although this is not an issue in the modern day, you may find code where the result of is changed into an array and looped through. This achieves the same thing, but it means that we are looping through arrays, not s. However forEach NodeList querySelectorAll NodeList let elements = document.querySelectorAll('.button'); Array.prototype.forEach.call(elements, (item) => { item.addEventListener('click', function(e) { console.log('some event content here...') }); }); Also Published Here
