recherche

Maison  >  Questions et réponses  >  le corps du texte

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> &#177; </button> <!--Estos botones serán de broma-->
            <button class=grey> &#8274; </button> <!--Estos botones serán de broma-->
            <button class=orange id="division" href="#"
                onclick="seleccionarBoton('operacion', 'division'); contadorOperacion = 1;"> &divide; </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;"> &times; </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;"> &plus; </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;"> &minus; </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

P粉548512637P粉548512637267 Il y a quelques jours578

répondre à tous(1)je répondrai

  • P粉808697471

    P粉8086974712024-04-02 09:27:49

    L'effet de survol ne fonctionne plus car 

    function resetearBoton(palabra) {
    botonOperacion = document.getElementById(palabra);
    botonOperacion.style["filter"] = "none";
}

    Lorsque cette fonction s'exécute, elle définit un style en ligne pour le bouton (filtre : aucun ;), et comme les styles en ligne ont une priorité plus élevée que les feuilles de style externes (botonesCalculadora.css), elle remplace la vôtre de 

    button:hover {
    cursor: pointer;
    filter: brightness(117%);
}

    Dans ButtonCalculator.css

    Il existe deux façons de résoudre ce problème

    1 Classe d'utilisation

    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";
  botonOperacion.classList.remove("active");
}

function alterarBotonOperacion(palabra) {
  if (palabra == "igual") {
    return;
  }
  operacion = palabra;
  botonOperacion = document.getElementById(palabra);
  botonOperacion.classList.add("active");
  // 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);
}
    body {
  background: black;
}

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,
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%;
}
    
  
    
    
    0

    2 Supprimez l'attribut de style du bouton au lieu de le définir dans la fonction de réinitialisation (filter:none;)

    function resetearBoton(palabra) {
    botonOperacion = document.getElementById(palabra);      function resetearBoton(palabra) {
    botonOperacion = document.getElementById(palabra);
//  botonOperacion.style["filter"] = "none";      /** remove this **/
    botonOperacion.removeAttribute("style");      /** add this **/
  }
}

    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";  /** remove this **/
  botonOperacion.removeAttribute("style"); /** add this **/
}

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);
}
    body {
  background: black;
}

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%;
}
    
  
    
    
    0

    répondre
    0
  • Annulerrépondre