Adding multi addEventListener to specific function

Question

I want to do multi AddEventListener to specific function, but the result is not what I want. I get always the last child on the list.

Why?

This is the code:

First section:

<script>  
    var inside_elm= new Array();
    inside_elm[1]="inside_e1";
    inside_elm[2]="inside_e2";
    inside_elm[3]="inside_e3";
    
    var kk = {      
        showBox :function(elm){
            alert(elm);
            document.getElementById(elm).style.display='block';
        }
    }
    
    function load() {
        var e_elm= new Array();
        e_elm[1]="e1";
        e_elm[2]="e2";
        e_elm[3]="e3";
    
        for(var i=1;i<3;i++){
            var k=e_elm[i];
            alert(inside_elm[i]);
    
            document.getElementById(e_elm[i]).addEventListener('click',function(){kk.showBox(inside_elm[i])},false);
        }
    }
    </script>

The body:

  <body onload="load();">
    <div id="e1">
        e1
        <div id="inside_e1" style="display:none;">inside_e1</div>
    </div>
    
    <div id="e2">
        e2
        <div id="inside_e2" style="display:none;">inside_e2</div>
    </div>
    <div id="e3">
        e3
        <div id="inside_e3" style="display:none;">inside_e3</div>
    </div>

You seem to be missing a closing div tag for <div id="e2">. EDIT: Someone fixed it (maybe you), but make sure that doesn't have an effect on the problem. — thisgeek
– thisgeek, Commented Dec 1, 2011 at 19:20

MattJenko · Accepted Answer · 2011-12-01 20:51:05Z

1

It's basically down to the fact that it doesn't evaluate 'i' until the function executes, by which stage it's set to 3.

What you want to do is use something like the following:

for(var i=1;i<4;i++){
    var k=e_elm[i];
    alert(inside_elm[i]);

    var elm = document.getElementById(e_elm[i]);
    elm.inside_elm = inside_elm[i];
    elm.addEventListener('click', function(){kk.showBox(this.inside_elm)},false);
}

answered Dec 1, 2011 at 20:51

MattJenko

1,2088 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roy Over a year ago

thanks man, this fix work great, but when i added more one element and i increased the counter in one , the last div is opened with more one div why ?? how the logic of this for is work ?

Roy Over a year ago

i fount the problem !!! i was missing closed tag on the div, your script work great. Thanks

CBusBus · Accepted Answer · 2011-12-01 19:18:07Z

1

I think it is down to the following, or at least it won't help matters.

for(i = 1;i < 3;i++){
....
}

Will only access the first two atoms of your array and will exit the loop before iterating the third time. Try

for(i = 1;i < 4;i++){
....
}

Similarly it is good practice to start array indices at 0 in which case

for(i = 0;i<3;i++){
....
}

would iterate through each (assuming the start index is 0)

answered Dec 1, 2011 at 19:18

CBusBus

2,3672 gold badges18 silver badges28 bronze badges

3 Comments

CBusBus Over a year ago

As an extension it might be worth using. <array variable>.length instead of a static value.

Roy Over a year ago

this is not an answer, someone can help me with my problem ?

Roy Over a year ago

i check your idea and it work, but this is not complete answer the best answer is above

Collectives™ on Stack Overflow

Adding multi addEventListener to specific function

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related