If you've ever worked in vanilla Javascript, you might be familiar with adding event listeners to elements using the following formula: 

\
```javascript
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 `#button` 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?

\
The issue is `addEventListener` is only good for adding an event to one DOM element - and `querySelector` 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.

## Adding Event Listeners to Multiple Elements

Instead of using `querySelector`, we're going to use `querySelectorAll` to match all elements on our page. The following code returns an item of type `NodeList`, consisting of all DOM elements matching `.button`. **To add events to every element**, we're going to need to loop through every matched element from our `querySelector`, and add events to each:

\
```javascript
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](https://fjolt.com/article/javascript-foreach-on-queryselectorall).

In modern browsers, `NodeList`s behave a lot like arrays, so we can use `forEach` to loop through each. To add an event to each `.button` then, we need to loop through it using `forEach`. So adding a `click` event to all `.button` elements looks like this:

\
```javascript
let elements = document.querySelectorAll('.button');

elements.forEach((item) => {
    item.addEventListener('click', () => {
        console.log('some event content here...')
    })
});
```

\
**However**, in older browsers like Internet Explorer, `forEach` doesn't exist on `NodeList`s. Although this is not an issue in the modern day, you may find code where the result of `querySelectorAll` is changed into an array and looped through. This achieves the same thing, but it means that we are looping through arrays, not `NodeList`s.

\
```javascript
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](https://fjolt.com/article/javascript-multiple-elements-addeventlistener)

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

Add Event Listener to Multiple Elements in Javascript

Too Long; Didn't Read

@smpnjn

RELATED STORIES