barnabe0057
Messages postés14440Date d'inscriptionlundi 2 mars 2009StatutContributeurDernière intervention19 avril 2024
-
Modifié le 9 janv. 2022 à 10:29
barnabe0057
Messages postés14440Date d'inscriptionlundi 2 mars 2009StatutContributeurDernière intervention19 avril 2024
-
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>
