1
document.getElementById("n1").addEventListener("click",n1);
document.getElementById("n2").addEventListener("click",n2);
document.getElementById("n3").addEventListener("click",n3);
document.getElementById("n4").addEventListener("click",n4);
document.getElementById("n5").addEventListener("click",n5);
document.getElementById("n6").addEventListener("click",n6);
document.getElementById("n7").addEventListener("click",n7);
document.getElementById("n8").addEventListener("click",n8);
document.getElementById("n9").addEventListener("click",n9);
document.getElementById("n0").addEventListener("click",n0);





function n1(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n1").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}

function n2(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n2").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n3(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n3").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n4(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n4").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n5(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n5").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n6(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n6").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n7(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n7").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n8(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n8").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n9(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n9").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
function n0(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("n0").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}
2
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. Tambien, aprovecha y haz el recorrido de bienvenida para entender mejor como funcionamos y de paso obtener tu primera medalla! No soy experto en js, pero de seguro tu funcion puede recibir como parametro el nombre del elemento que la ejecuto...
    – gbianchi
    Commented el 7 feb. 2019 a las 13:54
  • Te contesté y creo que te funcionará, pero si también adjuntaras el HTML correspondiente podría insertar un ejecutable.
    – tevvek
    Commented el 7 feb. 2019 a las 13:58

4 respuestas 4

6

Como comento en los comentarios, podría crear un ejecutable si también adjuntaras el HTML.

Lo que se hace a continuación es básicamente recorrer la de ids de los elementos y asignarles el mismo listener en función del parámetro.

let ns = ["n1", "n2", "n3", "n4", "n5", "n6", "n7", "n8", "n9", "n0"];

function foo() {
    ns.forEach((n) => {
        document.getElementById(n).addEventListener("click",() => {
            var actual = document.getElementById("display").innerHTML
            var sumado = document.getElementById(n).innerHTML
            document.getElementById("display").innerHTML = actual + sumado ;
        });
    })
}
0
5

Estás asignando prácticamente la misma función a un montón de elementos similares, con lo que se me ocurren dos soluciones, dependiendo de cómo sea el HTML:

Generalizar la función:

Todas las funciones listener son así:

function nX(){

    var actual = document.getElementById("display").innerHTML
    var sumado = document.getElementById("nX").innerHTML
    document.getElementById("display").innerHTML = actual + sumado ;

}

Para X siendo un número de un dígito. Por tanto se podría reescribir así:

function generica(clickEvent) {
  let id= clickEvent.target.id; //obtenemos el ID del evento
  let actualElem = document.getElementById("display");
    var sumado = document.getElementById(id).innerHTML
    actualElem.innerHTML = actualElem.innerHTML + sumado ;
}

Esto se podría usar así: añado una clase a todos los elementos y busco por esa clase:

let elementos = document.querySelectorAll('.clase')
elementos.forEach(elem => elem.addEventListener('click',generica));

Usar un generador de funciones

Puedes tener una función que genere funciones:

function generadora(id) {
  return function() {
    let actual = document.getElementById('display');
    let sumado = document.getElementById(`n${id}`).innerHTML;
    actual.innerHTML = actual.innerHTML + sumado ;
  }
}

Y asignarlo así:

for (let i=0;i<10;i++) {
  document.getElementById(`n${i}`).addEventListener('click',generadora(i));
}
2

a mi se me ocurre probar con algo asi:

// obtenemos todos los elementos con clase numbers
let numbers = document.querySelectorAll('.numbers')

// iteramos sobre todos los elementos
numbers.forEach(number => {
  // Agregamos evento click a cada elemento
  number.addEventListener('click', function() {
    // obtenemos el valor de actual y sumado
    let actual = document.getElementById("display").innerHTML
    let sumado = number.innerHTML
    // convertimos los numeros a int y sumamos sus valores
    document.getElementById("display").innerHTML = parseInt(actual) + parseInt(sumado);
  })
})
<div type="number" id="display">0</div>

<button class="numbers" id="n1">1</button>
<button class="numbers" id="n2">3</button>
<button class="numbers" id="n3">2</button>

aquí puedes agregar N elementos a tu html, siempre y cuando tengan la misma clase la función se asignara a estos.

2
  • 1
    Me gusta el uso de querySelectorAll, pero no entiendo por qué haces esto: var sumado = document.getElementById(number.id).innerHTML el uso de getElementById es redundante cuando ya en number tienes una referencia al elemento ¿?
    – A. Cedano
    Commented el 7 feb. 2019 a las 15:34
  • si, en este caso esta de más, voy a actualizar muchas gracias!
    – mariovzc
    Commented el 7 feb. 2019 a las 15:38
2

La solución es darle una función directamente al evento click, y de ahí simplemente hacer un for a los elementos que quieras agregarle ese evento.

for (var i = 0; i<10; i++){
  document.getElementById("n" + i).addEventListener("click",function(){
      var actual = document.getElementById("display").innerHTML
      var sumado = document.getElementById("n" + i).innerHTML
      document.getElementById("display").innerHTML = actual + sumado;
  });
}

2
  • Creo que no funcionaría a menos que declarases i con let Commented el 7 feb. 2019 a las 14:04
  • 1
    Vos tenes el mismo poder para moderar igual que todo el resto de la gente ;). Tene en cuenta, que si alguien ve solo codigo, tal vez no entienda que estas haciendo, y por eso se pide que lo expliques
    – gbianchi
    Commented el 7 feb. 2019 a las 14:04

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