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

@XSStringManolo · 3 Febrero 2020, 03:34 AM

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 · 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

@XSStringManolo · 23 Febrero 2020, 00:38 AM

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] Expandir
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!

Test Foro de elhacker.net SMF 2.1

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

@XSStringManolo

#!drvy

@XSStringManolo