Adding the same event listener to multiple elements

Question

I saw similar questions but either they aren't close enough to what I want or are just as unclear as their respective answers -- let's see:

What I have: The following chunk of code:

        addEventListener("load", function() {
            for(var x in document.getElementsByName("rbTipo")) {
                document.getElementsByName("rbTipo")[x].addEventListener("change", function() {
                    if(document.getElementById("rbTipoA").checked) {
                        document.getElementById("painelAluno").style.display = "block";
                        document.getElementById("painelEscola").style.display = "none";
                    }
                    else if(document.getElementById("rbTipoE").checked) {
                        document.getElementById("painelAluno").style.display = "none";
                        document.getElementById("painelEscola").style.display = "block";
                    }
                    else {
                        document.getElementById("painelAluno").style.display = "none";
                        document.getElementById("painelEscola").style.display = "none";
                    }
                });
            }
        });

What it should do:

For each DOM element with name="rbTipo", add it the change listener;
Change CSS properties of third-party elements on their change.

What it's doing wrong:

Apparently doc[...]byName("rbTipo")[x] is not selecting the elements themselves. Means x is not the current iteration index of the array returned from getElementsByName?

What I tried:

Give each name="rbTipo" element their own listener. Doesn't seem logical since we're talking about doing something for multiple elements. Not a big deal since I have only two but I'll be doing this really really often, and not always with "just two" indexes.

Do a console.log(x) in the loop body. I think I've heard of browsers enumerability problems in NodeLists. You definitely should cache the collection in a variable, and use proper array-like iteration over it — Bergi
– Bergi, Commented Apr 5, 2014 at 20:14
Apparently Chrome enumerates NodeList from 1++, not 0++, which is really pointless to me. Make your comment an answer, please -- it's really useful. — fizzydrinks
– fizzydrinks, Commented Apr 5, 2014 at 20:25
Just as a head's up: While the answers below work, when you start getting into attaching a LOT of listeners, you will want to look stackoverflow.com/questions/1687296/… — Jeremy J Starcher
– Jeremy J Starcher, Commented Apr 6, 2014 at 3:22

Bergi · Accepted Answer · 2014-04-05 20:35:38Z

for(var x in document.getElementsByName("rbTipo"))

I wouldn't count on enumerability of NodeLists/HTMLCollections. Better use array-style iteration.

Also, you shouldn't repeat the query, but store the collection in a variable. Btw, you do already give each element its own listener, which is a bit unnecessary.

addEventListener("load", function() {
    var rbTipos = document.getElementsByName("rbTipo"),
        rbTipoA = document.getElementById("rbTipoA"),
        rbTipoE = document.getElementById("rbTipoE"),
        painelA = document.getElementById("painelAluno"),
        painelE = document.getElementById("painelEscola");
    function listener() {
        if(rbTipoA.checked) {
            painelA.style.display = "block";
            painelE.style.display = "none";
        } else if(rbTipoE.checked) {
            painelA.style.display = "none";
            painelE.style.display = "block";
        } else {
            painelA.style.display = "none";
            painelE.style.display = "none";
        }
    }
    for(var i=0; i<rbTipos.length; i++) {
        rbTipos[i].addEventListener("change", listener);
    }
});

dirn · Accepted Answer · 2016-02-16 17:06:32Z

1

Find all the elements with name="rbTipo", and loop through them, adding the listener to each:

var rbTipos = document.querySelectorAll('[name="rbTipo"]');
for (var i = 0; i < rbTipos.length; i++) {
  rbTipos[i].addEventListener('change', myEventFunction);
}

edited Feb 16, 2016 at 17:06

dirn

21.1k7 gold badges75 silver badges76 bronze badges

answered Apr 5, 2014 at 20:10

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

Collectives™ on Stack Overflow

Adding the same event listener to multiple elements

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related