Question

I am trying to make an website. I am putting addEventListener to more elements in a function called more times:

    idImag = 0;

    function function1()
    {
        //do something
        function2()
    }

    function function2()
    {
        //do something
        document.getElementById("holder" + idImag).addEventListener('mouseover',function(){
         idImag++;
alert('It works');
    }

    function3(event)
    {
        alert(3);
    }

    function1();
    function1();

<div id="holder0">Dog</div>
<div id="holder1">Chicken</div>
<div id="holder2">Cow</div>

But there is a problem: Only the last element gets the event listener… the others do nothing after putting the mouse over it.
Then I’ve googled a little and found out about closures and how variables are kept even after function returned… I didn’t understand everything, but I just want to find out how to put the event listeners in function2. Can you help me?
Probably you noticed: I am a newbie. Sorry if the question is stupid or if it has no sense. If you need more details, I will put my whole code, but it has variables and comments in Romanian, so I am not sure if you will understand it. Sorry for my bad English and thank you in advance.

Answer 1

Why not a for loop?

function function3 (event) {
    alert(3);
}

for (var idImag = 0; i< numberOfHolders; i++) {
    //do something1
    //do something2
    document.getElementById("holder" + idImag).addEventListener('mouseover',function3);
}