L'activation du bouton provoque un dysfonctionnement de l'effet de survol
J'ai essayé d'apprendre les bases du développement Web (HTML, CSS et JS), j'ai donc essayé de créer une calculatrice Apple fonctionnelle. Tout fonctionnait bien jusqu'à ce que je remarque un petit bug.
Au début, l'effet de survol sur le bouton d'action fonctionnait très bien, la couleur devenait plus lumineuse au fur et à mesure que je survolais. Lorsque j'appuie sur le bouton, le bouton devient plus lumineux et le reste jusqu'à ce que l'utilisateur entre un autre numéro (ou le bouton "égal") pour faire quelque chose avec le numéro précédent. Après cela, le bouton d’action prendra sa couleur normale. Jusque-là, tout allait bien, mais j'ai remarqué qu'après que l'utilisateur appuie sur le bouton et agisse, l'effet de survol ne fonctionne plus et il ne change plus de couleur lorsque la souris le survole. < /p>
Voici tout le code que j'ai écrit :
//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);
}
Je m'attendais à ce qu'après avoir utilisé le bouton, il conserve toujours l'effet de survol. Après que chaque bouton d'action est utilisé une fois, l'effet de survol n'est plus appliqué. Ce problème ne se produit qu'avec les boutons d'action, pas non plus avec les chiffres ou les boutons d'effacement
