javascript - call addEventListener in loop with variable -

i new javascript. have 6 elements want equip similar event listeners. have working brute force solution want improve, (i think) have trouble java script closures.

working code:

  elem = document.getelementbyid("court1button");   elem.addeventlistener("click", wassern_id1, false);   elem = document.getelementbyid("court1xbutton");   elem.addeventlistener("click", abbrechen_id1, false);    elem = document.getelementbyid("court2button");   elem.addeventlistener("click", wassern_id2, false);   elem = document.getelementbyid("court2xbutton");   elem.addeventlistener("click", abbrechen_id2, false);    ... 4 more times ...    function wassern_id1(event) {     wassern(1, event)   }   function wassern_id2(event) {     wassern(2, event)   }    ... 4 more times ...    function abbrechen_id1(event) {     abbrechen(1, event)   }   function abbrechen_id2(event) {     abbrechen(2, event)   }    ... 4 more times ...    function wassern(id, event) { ...   function abbrechen(id, event) { ... 

i simple loop did not work, when found https://stackoverflow.com/a/2520602/2536029 , understand why not work. came following code, not work either, longer understand why not work. can explain me , me create working code?

for (var id = 1; id <= 6; id++) {   elem = document.getelementbyid("court" + id + "button");   elem.addeventlistener(     "click",     function(id2, event2){        wassern(id2, event2);      }(id, event),     false   );   elem = document.getelementbyid("court" + id + "xbutton");   elem.addeventlistener(     "click",     function(id2, event2){        abbrechen(id2, event2);      }(id, event),     false   ); } 

ps: problem is, event undefined during invocation of

function wassern(id, event) { ... event.stoppropagation(); 

you need put event listener mechanism inside closure, in laymen closure return value inner function, want event listener should present after loop executed or scope finished.

you need wrap whole event or getelementbyid inside closure, here code snippet

  (var id = 1; id <= 2; id++) {      (function(id){        elem = document.getelementbyid("court" + id + "button");        elem.addeventlistener(         "click",         function(event){wassern(id, event);},         false       );       elem = document.getelementbyid("court" + id + "xbutton");       elem.addeventlistener(         "click",         function(event){abbrechen(id, event);},         false       );     })(id)   } 

for getting event can pass this, refer event inside addeventlistner

here jsfiddle code http://jsfiddle.net/xtgr4/

hope above answer make sense you