0

[Por favor, solo soluciones aplicando únicamente JS Vanilla]

Tengo un resultado inesperado añadiendo eventos a un array obtenido con el getElementsByClassName.

    for (var i = 0; i < numeros.length; i++) {
    numeros[i].addEventListener("click", function () {
        var elemento = numeros[i];

        if (esCero()) {
            resultadoHTML.innerHTML = elemento.innerHTML;
        } else {
            console.log(elemento);
            resultadoHTML.innerHTML += elemento.innerHTML;
        }
    });
}

En la calculadora que estoy haciendo, hay varios elementos HTML que comparten la clase ".numeros", para 10 divs (números del 0-9). Cuando se clicka en un número, siempre hace la iteración como que es el número 5, aunque clique en otro número cualquiera.

2 respuestas 2

0

Lo puedes resolver utilizando setAttribute() Method. El resultado sería agregar onclick="myEvent(this)" a cada botón. De este modo vas poder registrar los eventos sin problemas y realizar las acciones pertinentes dentro de tu función myEvent()

Código de ejemplo:

var btns = document.getElementsByClassName("myClassName");

for(i=0; i< btns.length;i++)
{
   btns[i].setAttribute("onclick", "myEvent(this)");
}

function myEvent(obj){
  console.log("click button", obj.textContent)
}
<button class="myClassName">1</button>
<button class="myClassName">2</button>
<button class="myClassName">3</button>
<button class="myClassName">4</button>
<button class="myClassName">5</button>
<button class="myClassName">6</button>
<button class="myClassName">7</button>
<button class="myClassName">8</button>
<button class="myClassName">9</button>
<button class="myClassName">0</button>

Saludos!

0

Puedes hacerlo capturando el event del click asi:

    for (var i = 0; i < numeros.length; i++) {
    numeros[i].addEventListener("click", function (e) {
    var elemento = e.target;
    if (esCero()) {
resultadoHTML.innerHTML = elemento.innerHTML;
} else { 
console.log(elemento); resultadoHTML.innerHTML += elemento.innerHTML;
 } 
});
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.