Problème d'affichage

Résolu

barnabe0057 Messages postés 14455 Date d'inscription Statut Contributeur Dernière intervention -
barnabe0057 Messages postés 14455 Date d'inscription Statut Contributeur Dernière intervention - 9 janv. 2022 à 12:04

Bonjour,

Je suis en train de réaliser une calculatrice en JS, j'ai quasiment terminé mais j'ai un petit problème d'affichage dont je ne trouve pas l'origine.

L'écran de ma calculatrice est composé de 2 lignes "ecran1" et "ecran2". Je souhaiterais que la saisie du nombre s'affiche en bas sur "ecran2" puis remonte sur "ecran1" lorsqu'on appuie sur l'opérateur (comme la calculatrice Windows).

Le problème est que la saisie commence directement en haut sur "ecran1", je ne sais pas s'il s'agit d'un problème dans mon code html ou dans mon code js.

Merci pour votre aide.

calculatrice.html :

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8" />
        <title>Calculatrice</title>
        <link rel="stylesheet" href="calculatrice.css" />
    </head>

    <body>
        <div class="calculette">
            <div class="ecran">
                <div id="ecran1"></div>
                <div id="ecran2"></div>
            </div>
            <div class="rangee1">
                <button onclick="nettoyerEntree()">CE</button>
                <button onclick="nettoyer()">C</button>
                <button onclick="operation('<')"><=</button>
                <button onclick="operation('/')">/</button>
            </div>
            <div class="rangee2">
                <button class="chiffre" onclick="afficher(7)">7</button>
                <button class="chiffre" onclick="afficher(8)">8</button>
                <button class="chiffre" onclick="afficher(9)">9</button>
                <button onclick="operation('*')">*</button>
            </div>
            <div class="rangee3">
                <button class="chiffre" onclick="afficher(4)">4</button>
                <button class="chiffre" onclick="afficher(5)">5</button>
                <button class="chiffre" onclick="afficher(6)">6</button>
                <button onclick="operation('-')">-</button>
            </div>
            <div class="rangee4">
                <button class="chiffre" onclick="afficher(1)">1</button>
                <button class="chiffre" onclick="afficher(2)">2</button>
                <button class="chiffre" onclick="afficher(3)">3</button>
                <button onclick="operation('+')">+</button>
            </div>
            <div class="rangee5">
                <button onclick="inversion(saisie)">+/-</button>
                <button class="chiffre" onclick="afficher(0)">0</button>
                <button onclick="afficher('.')">.</button>
                <button onclick="egal(signe)">=</button>
            </div>
        </div>
    </body>
</html>

<script>
    let saisie = "";
    let operateur = "";
    let signe = "";
    let calcul = "";
    var nb1 = "";
    var nb2 = "";
    let inv = false;
    let virgule = false;

    function afficher(touche) {

        // on empêche de saisir plusieurs fois la virgule
        if (virgule == true && touche == ".") {return saisie};

        // on empêche de saisir des zéros inutiles
        if (saisie == "0" && touche == "0") {return saisie};

        // on incrémente la variable "saisie" en prenant en compte un éventuel appui sur la touche +/-
        if (inv) {saisie = touche} else {saisie += touche};

        // on affiche le résultat en bas de l'écran
        //document.getElementById("ecran1").innerHTML = calcul;
        document.getElementById("ecran2").innerHTML = saisie;
        
        // on définit un booléen correspondant à l'appui sur la touche virgule
        if (touche == ".") {virgule = true};

        // on réinitialise le booléen correspondant à l'appui sur la touche +/-
        inv = false;

        return saisie;
    }
    
    function operation(operateur) {

        // on mémorise l'opérateur
        signe = operateur;

        // on récupère le premier nombre suivi de l'opérateur
        nb1 = afficher(operateur); // nb1 = saisie;

        // on récupère le premier nombre sans l'opérateur
        nb1 = nb1.substr(0, saisie.length-1)

        // on formate la chaine avant affichage
        calcul = nb1 + ' ' + saisie.substr(saisie.length-1, 1);

        // on affiche le calcul en haut de l'écran
        document.getElementById("ecran1").innerHTML = calcul;
        document.getElementById("ecran2").innerHTML = "";

        // on réinitialise la saisie
        saisie = "";

        // on réinitialise le booléen correspondant à l'appui sur la touche virgule 
        virgule = false;

        return;
    }

    function egal(operateur) {

        // on vérifie si un deuxième nombre a bien été saisi
        if (saisie == "") {return}
        if (saisie == '+' || saisie == '-' || saisie == '*' || saisie == '/' || saisie == '.') {
            saisie = "";
            return;
        }
        
        // on récupère le deuxième nombre suivi du signe =
        nb2 = afficher(operateur); // nb2 = saisie;

        // on récupère le deuxième nombre sans le signe =
        nb2 = nb2.substr(0, saisie.length-1);
        
        // on formate la chaine avant affichage
        calcul += ' ' + nb2 + ' =';

        // on affiche le calcul en haut de l'écran
        document.getElementById("ecran1").innerHTML = calcul;

        // on appelle la fonction idoine en se basant sur l'opérateur
        switch (operateur) {
            case "+":
                document.getElementById("ecran2").innerHTML = addition(nb1, nb2);
                break;
            case "-":
                document.getElementById("ecran2").innerHTML = soustraction(nb1, nb2);
                break;
            case "*":
                document.getElementById("ecran2").innerHTML = multiplication(nb1, nb2);
                break;
            case "/":
                document.getElementById("ecran2").innerHTML = division(nb1, nb2);
                break;
        }

        // on réinitialise la saisie
        saisie = "";

        return;
    }

    function nettoyer(){
        saisie = "";
        operateur = "";
        signe = "";
        calcul = "";
        nb1 = "";
        nb2 = "";
        inv = false;
        virgule = false;

        document.getElementById("ecran1").innerHTML = "";
        document.getElementById("ecran2").innerHTML = "";
    }

    function nettoyerEntree(){
        inv = false;
        virgule = false;

        if (nb1 == "") {
            saisie = "";
            document.getElementById("ecran1").innerHTML = "";
            document.getElementById("ecran2").innerHTML = "";
            return;
        }
        
        if (signe != "" && nb2 == "") {
            saisie = "";
            document.getElementById("ecran1").innerHTML = calcul;
            document.getElementById("ecran2").innerHTML = "";
            return;
        }
    }

 function addition(a, b) {
        console.log("somme : ", a, '+', b)
  let c = (+a) + (+b);
  return c;
 }

    function soustraction(a, b) {
  let c = a - b;
  return c;
 }

    function multiplication(a, b) {
  let c = a * b;
  return c;
 }

    function division(a, b) {
  let c = a / b;
  return c;
    }

    function retourArr(a) {
        let c = a.substr(0, -1);
        return c;
 }

    function inversion(a) {
        if (saisie !== "" && saisie !== "0") {
            let c = a * -1;
            inv = true;
            afficher(c);
            return c;
        }
        return a;
 }


</script>

calculatrice.css :

* {
  margin: 0;
  padding: 0;
}

html {
  background-color: white;
}

body {
  display: flex;
  justify-content: center;
  margin: 5%;
  padding: 3.5rem;
  max-width: 42%;
  color: blue;
  border: 3mm ridge rgba(250, 235, 215, 0.6);
  box-sizing: border-box;
  border-radius: 1rem;
  background-color: gainsboro
}

.calculette {
  display: flex;
  flex-direction: column;
}

.ecran {
  background: linear-gradient(to bottom, rgb(127, 214, 86), 50%,#53b62c);
  padding-right: 10px;
  text-align: right;
  border: thick double #89db53;
  border-radius: 0.5rem;
  background-color: #53b62c;
  min-height: 80px;
  margin-bottom: 20px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 2rem;
  color: darkslategrey;
}

button {
  box-shadow: 3px 3px darkkhaki;
  margin: 3px;
  border: 1px solid white;
  box-sizing: border-box;
  border-radius: 0.8rem;
  background-color: #a81bb4;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 1.6rem;
  color: white;
  line-height: 1.7rem;
  min-width: 5rem;
  min-height: 3rem;
}

.chiffre {
  background-color: #34749e;
}

Configuration: Windows / Firefox 95.0

Afficher la suite

A voir également:

Problème d'affichage
Affichage double ecran - Guide
Problème affichage fenêtre windows 10 - Guide
Windows 11 affichage classique - Guide
Problème affichage page internet google chrome - Forum Téléphones & tablettes Android
Pinterest problème affichage ✓ - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

barnabe0057 Messages postés 14455 Date d'inscription Statut Contributeur Dernière intervention 4 925

Problème résolu.

Ma div "ecran1" se retrouvait parfois avec une hauteur de 0, j'ai donc ajouté dans mon css une hauteur minimale.

Bon dimanche à tous.

Discussions similaires

pinterest bug affichage

Les images ne s'affichent plus

impossible de voir les photos et videos sur une conversation messenger

Probleme d'affichage google chrome

Problème d'affichage d'une page web.

Votre réponse

Discussions similaires