Adding event listeners to multiple elements

Question

I've been struggling with this for a good couple of hours now.

I want to add an event listener to all <select>s on a page and I've got this piece of code so far:

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', alert('test!'), false);
    }
}

This only triggers the alert when the page is loaded and not when I change the value in any of my <select>s.

Can I get a nudge in the right direction, please? :-)

antyrat · Accepted Answer · 2012-12-17T14:24:12.593

9

You need to have there anonymous function for that as you invoke alert() function immediately in your example:

 ... .addEventListener('change', function() { alert('test!')}, false ...

For now according to your code addEventListener tries to add result of undefined (return of alert() function).

Or you can just pass function handler for that:

function alertMe() {
    alert( 'test!' );
}
...

... .addEventListener('change', alertMe, false ...

Note: that by making somefunction(arg[, arg...]) call you reference not to function, but to what function returns.

edited Dec 17 '12 at 14:24

answered Dec 17 '12 at 14:09

antyrat

27,479
9
75
76

1

Oh. I was positive I'd tried that, but apparently not. Thank you! Edit: I see. Now that you mention it it makes sense to me. – Christian Lundahl Dec 17 '12 at 14:10
@Perplexor Are you sure? I'm not seeing another error in your code. – antyrat Dec 17 '12 at 14:11
Of course I tried it in some other circumstances, which is why it didn't work at that time. But now it works with your solution! – Christian Lundahl Dec 17 '12 at 14:25

score 6 · Answer 2 · answered Dec 17 '12 at 14:17

6

Aside from wrapping the alert in a function, like mentioned before, don't use getElementsByTagName for every iteration of the loop:

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', function(){alert('test!')}, false);
    }
}

You have the list of select elements saved to a variable, it's not necessary, not to mention inefficient to get all these elements, each loop iteration.

answered Dec 17 '12 at 14:17

Cerbrus

70,800
18
132
147

Good point! I actually just used "trial and error" to get the result I wanted. That's why I did like that. Thank you! – Christian Lundahl Dec 17 '12 at 14:26
No problem, "Trial and Error" is, in my opinion, the only way to really learn to program, so good job :P – Cerbrus Dec 17 '12 at 14:27
Helpful answer, Do you know any faster way? I mean getElementByTagName may be a little slow – Mohammad Kermani Jul 12 '16 at 11:15
@M98 You can give a class to all the elements you want to add listener to the call `getElementsByClassName()`. Which should be a little faster. – Sayam Qazi Sep 17 '17 at 08:24

isapir · Answer 3 · 2018-01-21T18:42:07.657

I created the following simple function, which iterates over all of the elements that match the selector, and add an event listener for the event with the passed handler.

This is similar functionality for jQuery's $(selector).on(event, handler)

function addEventListeners(selector, event, handler, useCapture){

    useCapture = useCapture || false;

    Array.prototype.forEach.call(
        document.querySelectorAll(selector)
       ,function(el, ix) { 
          el.addEventListener(event, handler, useCapture);
        }
    );
}

So for the OP the way to use this function would be like so:

addEventListeners("select", "change", function(evt){ console.log(evt); });

See also my answer for Event listener for current and future elements

score 0 · Answer 4 · answered Dec 17 '12 at 14:10

You are executing the alert() function immediately, you need to pass the addEventListener function a function instead, so:

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        document.getElementsByTagName('select')[i].addEventListener('change', function () { alert('test!'); }, false);
    }
}

score 0 · Answer 5 · answered Jan 10 '18 at 12:12

0

Event Bubbling is the important concept in javascript, so if you can add event on DOM directly, you can save some lines of code :

document.addEventListener('change', function(e){
  if(e.target.tagName=="SELECT"){
   alert('SELECT CHANGED');
  }
})

answered Jan 10 '18 at 12:12

Ayush Sharma

2,057
15
25

score 0 · Answer 6 · answered Aug 30 '21 at 13:24

I always recommend delegation - if the inputs are in the same container, then you can do this

window.addEventListener("load", function() { // on page load
  document  // or a closer static container
    .addEventListener("input", function(e) { // input or change
    const tgt = e.target;
    if (tgt.tagName === "SELECT") {
      const id = tgt.id;
      console.log("You changed", id)
    }
  });
});

<div id="inputContainer">
  <h1>Change the select</h1>
  <select id="sel1">
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select id="sel2">
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

Adding event listeners to multiple elements

6 Answers6

Linked