Estoy intentando hacer una calculadora y quiero que cuando presione por ejemplo el signo de más, menos, multiplicación, división, el botón presionado se ponga con un color fondo y color de letra distinto a los demás y que si por ejemplo presiono otro signo el signo que cambio de color vuelva a estar como estaba antes y el nuevo presionado cambie.
La solución que hice funciona pero me parece que me queda un código muy largo y no sé si pueda a través de un bucle o algo parecido.
En la función frestar
se escucha el click de el botón restar y cuando se le da click se le pone el color de fondo y el color de letra y se le cambia al signo de sumar al color con el que estaba antes pero me tocaría hacer lo mismo para cada signo.
//DECLARACION VARIABLES FUNCION OPERACIONES
let sumar= document.getElementById("sumar");
let restar= document.getElementById("restar");
let multipli=document.getElementById("multipli");
let dividir=document.getElementById("dividir");
//
restar.addEventListener("click", frestar);
function frestar(){
restar.style.color="orange";
restar.style.backgroundColor="white";
sumar.style.color="white";
sumar.style.backgroundColor="orange";
}
input[value="÷"], input[value="x"],input[value="-"],input[value="+"],input[value="="]{
background: rgb(255, 195, 0, 0.9);
color: white;
}
<input type="button" name="" value="÷"class="buton" id="dividir">
<input type="button" name="" value="x"class="buton" id="multipli">
<input type="button" name="" value="-"class="buton" id="restar">
<input type="button" name="" value="+"class="buton" id="sumar">