addEventListener usando for loop y pasando valores [duplicado]

Question

Oct 25, 2013, 11:32 AM

addEventListener usando for loop y pasando valores [duplicado]

Esta pregunta ya tiene una respuesta aquí:

JavaScript cierre dentro de bucles - ejemplo práctico simple 39 respuestas

Estoy tratando de agregar oyentes de eventos a varios objetos usando un bucle for, pero termino con todos los oyentes apuntando al mismo objeto -> el último.

Si agrego los oyentes manualmente definiendo boxa y boxb para cada instancia, funciona. Supongo que es el addEvent for-loop que no funciona de la manera que esperaba. Tal vez uso el enfoque equivocado por completo.

Ejemplo usando 4 de la clase = "contenedor" El disparador en el contenedor 4 funciona como se supone que debe hacerlo. Se activa en el contenedor 1,2,3 evento de activación en el contenedor 4, pero solo si el activador ya se ha activado.

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  var k = i + 1;
  var boxa = elem[i].parentNode.id;
  var boxb = elem[k].parentNode.id;

  elem[i].addEventListener("click", function() {
    makeItHappen(boxa, boxb);
  }, false);
  elem[k].addEventListener("click", function() {
    makeItHappen(boxb, boxa);
  }, false);
}

<div class="container">
  <div class="one" id="box1">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box2">
    <p class="triggerClass">some text</p>
  </div>
</div>

<div class="container">
  <div class="one" id="box3">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box4">
    <p class="triggerClass">some text</p>
  </div>
</div>