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 ;
}
-
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.– tevvekCommented el 7 feb. 2019 a las 13:58
4 respuestas
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 id
s 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 ;
});
})
}
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));
}
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.
-
1Me gusta el uso de
querySelectorAll
, pero no entiendo por qué haces esto:var sumado = document.getElementById(number.id).innerHTML
el uso degetElementById
es redundante cuando ya ennumber
tienes una referencia al elemento ¿? Commented el 7 feb. 2019 a las 15:34 -
si, en este caso esta de más, voy a actualizar muchas gracias!– mariovzcCommented el 7 feb. 2019 a las 15:38
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;
});
}
-
Creo que no funcionaría a menos que declarases i con
let
Commented el 7 feb. 2019 a las 14:04 -
1Vos 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