Event listener in a loop

Question

So I have this eventListner that calls an Class, works like a charm but only once since inte call the add class with index 0.

Im trying to create a loop that will call every add class inside the script, but i cant get loop...

This is the event listner without the loop

var AddEvent = "add";
var addClass = document.getElementsByClassName(AddEvent)[0]
addClass.addEventListener("click", addDiceEvent, false);
function addDiceEvent() {
      dicesides_funcfunc();
} 

And this is what Im trying to create.

function AddDice(){
        for (i = 0; i < 5; i++) {
            var addClass =  document.getElementsByClassName("add");
            addClass.addEventListener("click", addDiceEvent, false);
            function addDiceEvent(){
            dicesides_funcfunc();
            }
        }

}  AddDice();

Any ideas ?

Answer 1

Hope this work.......

var addClassArr= document.getElementsByClassName(AddEvent);

for (var x in addClassArr)
 {
var addClass = addClassArr[x];

addClass.addEventListener("click", addDiceEvent, false);

}

function addDiceEvent() {
      dicesides_funcfunc();
}

Answer 2

You need to create new skope in for loop, try this:

function AddDice(){
        for (i = 0; i < 5; i++) {

            (function(){       
            var addClass =  document.getElementsByClassName("add");

                addClass.addEventListener("click", function(){
                    dicesides_funcfunc();
                }, false);
            })();
        }
}