# Javascript Add Event Listener to Multiple Elements

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 which 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...')
    });
});
```