[Resuelto] Forma correcta de hacer esto? No referencia en funcion en click.

Iniciado por @XSStringManolo, 3 Febrero 2020, 03:34 AM

0 Miembros y 1 Visitante están viendo este tema.

@XSStringManolo

Al añadir listeners con una función que hace alert de i, se queda la referencia asignada al listener, es decir, cuando se presione el botón, se comprueba cual es el valor de i al presional el botón. Cual es la forma correcta de dejar una valor fijo incremental en cada botón? Es decir, que cuando presione el primer botón salga 1, cuando presione el segundo salga 2, etc.

Una forma corta y eficiente.

Código (javascript) [Seleccionar]
<!DOCTYPE html>
<html>
<input type="number" placeholder="input" id="inpcalc"></input>
<button type="button" class="bcalc">7</button>
<button type="button" class="bcalc">8</button>
<button type="button" class="bcalc">9</button>
<button type="button" class="bcalc">+</button>
<button type="button" class="bcalc">4</button>
<button type="button" class="bcalc">5</button>

<script>
var botones = document.querySelectorAll(".bcalc");
var input = document.querySelector("#inpcalc");

for(var i = 0; i < botones.length; ++i) {
botones[i].addEventListener("click",  function(){alert("Boton Número " + i)});
}
</script>
</body>
</html>

#!drvy

Hay una duda exactamente igual que la tuya en Stackoverflow de hace 10 años jaja.

https://stackoverflow.com/questions/2568966/how-do-i-pass-the-value-not-the-reference-of-a-js-variable-to-a-function

En resumidas cuentas, tienes que crear una variable cuyo scope sea solo el del bloque actual.

Código (javascript) [Seleccionar]
for (let i = 0; i < botones.length; ++i) {    
   botones[i].addEventListener("click",  function(event) {
    alert(i);
   });
}



https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Statements/let


Saludos

@XSStringManolo

Cita de: #!drvy en 22 Febrero 2020, 23:53 PM
Hay una duda exactamente igual que la tuya en Stackoverflow de hace 10 años jaja.

https://stackoverflow.com/questions/2568966/how-do-i-pass-the-value-not-the-reference-of-a-js-variable-to-a-function

En resumidas cuentas, tienes que crear una variable cuyo scope sea solo el del bloque actual.

Código (javascript) [Seleccionar]
for (let i = 0; i < botones.length; ++i) {    
   botones[i].addEventListener("click",  function(event) {
    alert(i);
   });
}



https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Statements/let


Saludos
Ostras, mira que me comí la cabeza con esto!