2

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

2 respuestas 2

2

Podrías agregar un listener a tus 4 botones al igual que hacías con el botón restar, a la función le puse el nombre cambiarColor():

// A cada botón, le agrego un listener, indicando que al hacer click en ellos, ejecute la función "cambiarColor()"
sumar.addEventListener("click", cambiarColor);
restar.addEventListener("click", cambiarColor);
multipli.addEventListener("click", cambiarColor);
dividir.addEventListener("click", cambiarColor);

Ahora, la función consiste en que restableceremos todos los colores a su estado normal y solo pintaremos al botón quien le hemos dado clic con this, ya que con this se refiere al botón quien escuchó el evento click:

function cambiarColor() {
  // Restablecemos los colores a todos los botones...
  sumar.style.color="";
  sumar.style.backgroundColor="";
  restar.style.color="";
  restar.style.backgroundColor="";
  multipli.style.color="";
  multipli.style.backgroundColor="";
  dividir.style.color="";
  dividir.style.backgroundColor="";

  // Y cambiamos el color sólo al botón que se hizo clic.
  this.style.color="orange";
  this.style.backgroundColor="white";
}

Código completo:

//DECLARACION VARIABLES DE LOS BOTONES
let sumar = document.getElementById("sumar");
let restar = document.getElementById("restar");
let multipli = document.getElementById("multipli");
let dividir = document.getElementById("dividir");

// A cada botón, le agrego un listener, indicando que al hacer click en ellos, ejecute la función "cambiarColor()"
sumar.addEventListener("click", cambiarColor);
restar.addEventListener("click", cambiarColor);
multipli.addEventListener("click", cambiarColor);
dividir.addEventListener("click", cambiarColor);

function cambiarColor() {
  // Restablecemos los colores a todos los botones...
  sumar.style.color="";
  sumar.style.backgroundColor="";
  restar.style.color="";
  restar.style.backgroundColor="";
  multipli.style.color="";
  multipli.style.backgroundColor="";
  dividir.style.color="";
  dividir.style.backgroundColor="";

  // Y cambiamos el color sólo al botón que se hizo clic.
  this.style.color="orange";
  this.style.backgroundColor="white";
}
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">

0

Te dejo una propuesta usando el método querySelectorAll() con el cual se puede simplificar y mejorar el código que ya tienes.

Básicamente se puede agregar o quitar una clase de CSS a través de JS, accediendo a los elementos que tengan una clase compartida.

//Obtener todos los botones con clase operator
var buttons = document.querySelectorAll('.operator');

//Recorrer los botones
buttons.forEach((button) => {
  //Agregar el listener para ejecutar la función al hacer click
  button.addEventListener('click', event => {
    //Ejecutar la funcion resetColor
    resetColor();
    //Agregar la clase operatorClicked solo al botón que recibe el evento
    event.target.classList.add("operatorClicked");
  })
});

//Eliminar la clase operatorClicked de todos los botones para restablecer los colores originales
function resetColor() {  
  buttons.forEach((button) => {
    button.classList.remove("operatorClicked");
  })
};
.operator {
  background: rgb(255, 195, 0, 0.9);
  color: white;
}

.operatorClicked {
  background: white;
  color: orange;
}
<input type="button" name="" value="÷" class="operator" id="dividir">
<input type="button" name="" value="x" class="operator" id="multipli">
<input type="button" name="" value="-" class="operator" id="restar">
<input type="button" name="" value="+" class="operator" id="sumar">

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.