Saltar al contenido

Pasar parámetros en el evento onClick de Javascript

Solución:

Esto sucede porque la i se propaga por el alcance una vez que se invoca la función. Puede evitar este problema utilizando un cierre.

for (var i = 0; i < 10; i++) {
   var link = document.createElement('a');
   link.setAttribute('href', '#');
   link.innerHTML = i + '';
   link.onclick = (function() {
      var currentI = i;
      return function() { 
          onClickLink(currentI + '');
      }
   })();
   div.appendChild(link);
   div.appendChild(document.createElement('BR'));
}

O si desea una sintaxis más concisa, le sugiero que use la solución de Nick Craver.

Esto sucede porque todos hacen referencia al mismo i variable, que cambia cada bucle, y se deja como 10 al final del ciclo. Puedes resolverlo usando un cierre como este:

link.onclick = function(j) { return function() { onClickLink(j+''); }; }(i);

Puedes intentarlo aquí

O hacer this sea ​​el enlace en el que hizo clic en ese controlador, así:

link.onclick = function(j) { return function() { onClickLink.call(this, j); }; }(i);

Puedes probar esa versión aquí

link.onclick = function() { onClickLink(i+''); };

Es un cierre y almacena una referencia a la variable. i, no el valor que i se mantiene cuando se crea la función. Una solución sería envolver el contenido del for bucle en una función haga esto:

for (var i = 0; i < 10; i++) (function(i) {
    var link = document.createElement('a');
    link.setAttribute('href', '#');
    link.innerHTML = i + '';
    link.onclick=  function() { onClickLink(i+'');};
    div.appendChild(link);
    div.appendChild(document.createElement('BR'));
}(i));
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *