Button activation causes hover effect to malfunction
I've been trying to learn the basics of web development (HTML, CSS, and JS), so I've been trying to make a working Apple calculator. Everything was working fine until I noticed a small bug.
At first, the hover effect on the action button works great, the color gets brighter as I hover. When I press the button, the button becomes brighter and stays that way until the user enters another number (or an "equals" button) to do something with the previous number. After that, the action button will change to normal color. Until then, everything was fine, but I noticed that after the user presses the button and takes action, the hover effect no longer works and it no longer changes its color when the mouse is hovering over it. < /p>
This is all the code I wrote:
//HTML
<!DOCTYPE html>
<html>
<head>
<title>
Calulcadora
</title>
<link rel="stylesheet" href="botonesCalculadora.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body style="background-color: black;">
<div class="calculadora">
<div class="linea_botones">
<p class="barra-resultado" id="result">0</p>
</div>
<div class="linea_botones">
<button class=grey href="#" onclick="seleccionarBoton('especial', 'resetear');"> AC </button>
<button class=grey> ± </button> <!--Estos botones serán de broma-->
<button class=grey> ⁒ </button> <!--Estos botones serán de broma-->
<button class=orange id="division" href="#"
onclick="seleccionarBoton('operacion', 'division'); contadorOperacion = 1;"> ÷ </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '7');"> 7 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '8');"> 8 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '9');"> 9 </button>
<button class=orange id="multi" href="#"
onclick="seleccionarBoton('operacion', 'multi'); contadorOperacion = 1;"> × </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '4');"> 4 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '5');"> 5 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '6');"> 6 </button>
<button class=orange id="suma" href="#"
onclick="seleccionarBoton('operacion', 'suma'); contadorOperacion = 1;"> + </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '1');"> 1 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '2');"> 2 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '3');"> 3 </button>
<button class=orange id="resta" href="#"
onclick="seleccionarBoton('operacion', 'resta'); contadorOperacion = 1;"> − </button>
</div>
<div class="linea_botones">
<button class=blackZero href="#" onclick="seleccionarBoton('numero', '0');"> 0 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '.');"> . </button>
<button class=orange id="igual" href="#"
onclick="seleccionarBoton('operacion', 'igual'); contadorOperacion = 1;"> = </button>
</div>
</div>
<script type="text/javascript" src="calculadora.js"></script>
</body>
</html>
//CSS
button {
height: 64px;
width: 64px;
border-radius:32px;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
border-style: none;
margin-top: 5px;
margin-left: 3px;
margin-bottom: 5px;
margin-right: 3px;
transition: filter 0.15s;
}
button:hover {
cursor: pointer;
filter: brightness(117%);
}
button:active {
filter: brightness(135%);
}
.orange {
background-color: orange;
color: white;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
/*font-weight: bold;*/
}
.black {
background-color: rgb(49,49,49);
color: white;
}
.blackZero{
background-color: rgb(49,49,49);
color: white;
width: 138px;
padding-right: 86px;
}
.grey {
background-color: rgb(159,159,159);
color: black;
}
.linea_botones {
margin-left: 25%;
margin-right: 25%;
margin-top: 0;
width: 50%;
text-align: center;
display: inline-block;
}
.barra-resultado {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
font-size: 64px;
width: 265px;
color: black;
text-align: right;
display: inline-block;
margin-bottom: 5px;
color: white;
}
.calculadora {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
}
//JAVASCRIPT
let numeroOperar = null;
let numeroOperacion = null;
var operacion = null;
var operacionAnterior = null;
var flagOperacion = 0;
var digitosIngresados = 0;
let resultado = document.getElementById("result");
let resultadoOperacion = 0;
function seleccionarBoton(tipo, valor) {
switch (tipo) {
case 'numero': //Revisar casos de uso: "Poner dos veces punto decimal", "Oprimir dos veces una operacion"
if (digitosIngresados == 0 && valor == '0') {
resultado.innerHTML = '0';
numeroOperacion = 0;
break;
}
if (digitosIngresados == 0 && valor != '0') {
resultado.innerHTML = '';
resultado.innerHTML = valor;
numeroOperacion = parseFloat(valor);
digitosIngresados++;
break;
}
if (digitosIngresados > 0) {
resultado.innerHTML = resultado.innerHTML + valor;
numeroOperacion = (numeroOperacion * 10) + parseFloat(valor);
digitosIngresados++;
break;
}
break;
case 'operacion':
operacion = valor;
console.log("Contador: " + flagOperacion);
if (flagOperacion == 0) {
numeroOperar = numeroOperacion;
try {
resetearBoton(operacionAnterior);
} catch (error) {
//Vacío -> Que no haga nada
}
alterarBotonOperacion(valor);
operacionAnterior = operacion;
digitosIngresados = 0;
flagOperacion = 1;
break;
}
if (flagOperacion == 1) {
switch (operacionAnterior) {
case 'suma':
resultadoOperacion = sumarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'resta':
resultadoOperacion = restarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'multi':
resultadoOperacion = multiplicarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'division':
resultadoOperacion = dividirDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'igual':
flagOperacion = 0;
break;
}
digitosIngresados = 0;
operacionAnterior = operacion;
}
break;
case 'especial':
if (valor == 'resetear') {
resetearCalculadora();
}
break;
};
}
function resetearCalculadora() {
digitosIngresados = 0;
flagOperacion = 0;
resultado.innerHTML = '0';
numeroOperacion = 0;
numeroOperar = 0;
if (operacion == null) {
operacion == 'suma';
}
resetearBoton(operacion);
operacion = null;
}
function alternativaResetearCalculadora() {
location.reload();
}
function resetearBoton(palabra) {
botonOperacion = document.getElementById(palabra);
botonOperacion.style["filter"] = "none";
}
function alterarBotonOperacion(palabra) {
if (palabra == 'igual') {
return;
}
operacion = palabra;
botonOperacion = document.getElementById(palabra);
botonOperacion.style["filter"] = "brightness(135%)";
}
function resetearDuranteOperacion() {
as;
}
function sumarDosNumeros(a, b) {
return parseFloat(a) + parseFloat(b);
}
function restarDosNumeros(a, b) {
return parseFloat(a) - parseFloat(b);
}
function multiplicarDosNumeros(a, b) {
return parseFloat(a) * parseFloat(b);
}
function dividirDosNumeros(a, b) {
return parseFloat(a) / parseFloat(b);
}
I expect that after using the button, it will still retain the hover effect. After each action button is used once, the hover effect is no longer applied. This problem only occurs with the action button, not the number or clear buttons
