call addEventListener in loop with variable

Question

I am new to JavaScript. I have a 6 elements that I want to equip with very similar event listeners. I have a working brute force solution that I want to improve, but (I think) I have trouble with JavaScript 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 a simple loop that did not work, when I found https://stackoverflow.com/a/2520602/2536029 and understand why it could not work. Then I came up with the following code, that does not work either, but now I now longer understand why it does not work. Can someone explain it to me and help 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: the problem is, that event is undefined during the invocation of

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

Answer 1

You need to put event listener mechanism inside closure, in laymen closure return value from inner function, you want your event listener should be present even after loop is executed or scope is finished.

You need to wrap whole event or getElementByid inside closure, here is code snippet

  for (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 you can pass this, this refer to event inside addEventListner

Here is jsFiddle code http://jsfiddle.net/Xtgr4/

Hope above answer make sense to you