Home/ Questions/Q 6895413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:54:19+00:00

I want to do multi AddEventListener to specific function, but the result is not

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
}
    • 0