Calculatrice, bug calcul avec eval()

**EperW46** · 23/02/2021, 18h54

Bonjour, voici mon code.
J'ai remarqué qu'il y avait une erreur si on cliquait sur * ou / plusieurs fois d'affilé : eval() ne calcule rien, la page est plantée...
Serait-il possible d'empêcher ce beug ?
Merci beaucoup

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<title>Calculatrice</title>
	<script language="JavaScript">
		var texte='';
		function chiffre(a){
			texte+=a;
			document.getElementsByTagName("label")[0].innerHTML = texte;
		}
		function cale(ch){
			texte+=" "+ch+" ";
			document.getElementsByTagName("label")[0].innerHTML = texte;
		}
		function res(){
			if(texte[1] == "*" || texte[1] == "/"){  //Gestion des cas particuliers si * ou / au début du calcul, réinitialisation pour débeuguer
				texte='';
			}
			texte+=" = " + eval(texte);
 
			document.getElementsByTagName("label")[0].innerHTML = texte;
			texte='';
		}
	</script>
</head>
<body bgcolor="#ffffff" text="#0080ff">
	<h1>Calculs</h1>
	<h2>Choisir un chiffre</h2>
	<p>Cliquez sur le bouton
		<input type="button" value="0" onClick="chiffre('0')"/>
		<input type="button" value="1" onClick="chiffre('1')"/>
		<input type="button" value="2" onClick="chiffre('2')"/>
		<input type="button" value="3" onClick="chiffre('3')"/> 
		<input type="button" value="4" onClick="chiffre('4')"/>
		<input type="button" value="5" onClick="chiffre('5')"/>
		<input type="button" value="6" onClick="chiffre('6')"/>
		<input type="button" value="7" onClick="chiffre('7')"/>
		<input type="button" value="8" onClick="chiffre('8')"/>
		<input type="button" value="9" onClick="chiffre('9')"/>
	</p>
	<h2>Choisir <u>un</u> opérateur</h2>
	<p>Cliquez sur le bouton
		<input type="button" value="+" onClick="cale('+')"/>
		<input type="button" value="-" onClick="cale('-')"/>
		<input type="button" value="*" onClick="cale('*')"/>
		<input type="button" value="/" onClick="cale('/')"/>
	</p>
	<h2>Validez
		<input type="button" value="OK" onClick="res()"/>
	</h2>
	<br/>
	<h2>Votre calcul est : <label></label></h2>
</body>
</html>

**javatwister** · 24/02/2021, 00h04

Bonjour,

Ta ligne 13 pose problème: "**" signifie carré du nombre qui précède. Mais "* * " ne signifie rien de logique.

Surtout, prépare-toi à interdire tous les cas de calculs aberrants; ça paraît normal!
Et entre nous, tu auras un problème dès que tu termineras ta chaîne par un opérateur.
(ouvre ta console - F12 - pour voir ce qui se passe quand tu testes)

**EperW46** · 24/02/2021, 12h32

Merci, j'ai corrigé mon code. Je dois afficher le calcul à l'aide de la balise <label>. N'est-ce pas maladroit la façon dont je l'ai placée ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<title>Calculatrice</title>
	<script language="JavaScript">
		var texte='';
		function chiffre(a){
			texte+=a;
			document.getElementsByTagName("label")[0].innerHTML = texte;
		}
		function cale(ch){
			switch (texte[texte.length -1 ]){
			//Gestion des cas particuliers, empêcher d'avoir deux opérateurs saisis d'affilé pour empêcher une erreur au niveau de eval()
				case "*":
					return;
				case "+":
					return;
				case "-":
					return;
				case "/":
					return;
			}
			texte+=ch;
			document.getElementsByTagName("label")[0].innerHTML = texte;
		}
		function res(){
			if(texte[0] == "*" || texte[0] == "/"){  //Gestion cas particulier : réinitialisation si le premier caractère est l'opérateur * ou / (calcul impossible)
				document.getElementsByTagName("label")[0].innerHTML = "impossible. Veuillez saisir un calcul approprié.";
				return texte='';
			}
			switch (texte[texte.length -1 ]){
			//Gestion des cas particuliers, empêcher de calculer au niveau de eval() si le calcul se termine par un opérateur (causerait une erreur)
				case "*":
					return;
				case "+":
					return;
				case "-":
					return;
				case "/":
					return;
			}
			texte+=" = " + eval(texte);
 
			document.getElementsByTagName("label")[0].innerHTML = texte;
			texte='';
		}
	</script>
</head>
<body bgcolor="#ffffff" text="#0080ff">
	<h1>Calculs</h1>
	<h2>Choisir un chiffre</h2>
	<p>Cliquez sur le bouton
		<input type="button" value="0" onClick="chiffre('0')"/>
		<input type="button" value="1" onClick="chiffre('1')"/>
		<input type="button" value="2" onClick="chiffre('2')"/>
		<input type="button" value="3" onClick="chiffre('3')"/> 
		<input type="button" value="4" onClick="chiffre('4')"/>
		<input type="button" value="5" onClick="chiffre('5')"/>
		<input type="button" value="6" onClick="chiffre('6')"/>
		<input type="button" value="7" onClick="chiffre('7')"/>
		<input type="button" value="8" onClick="chiffre('8')"/>
		<input type="button" value="9" onClick="chiffre('9')"/>
	</p>
	<h2>Choisir un opérateur</h2>
	<p>Cliquez sur le bouton
		<input type="button" value="+" onClick="cale('+')"/>
		<input type="button" value="-" onClick="cale('-')"/>
		<input type="button" value="*" onClick="cale('*')"/>
		<input type="button" value="/" onClick="cale('/')"/>
	</p>
	<h2>Validez
		<input type="button" value="OK" onClick="res()"/>
	</h2>
	<br/>
	<h2>Votre calcul est : <label></label></h2>
</body>
</html>

**javatwister** · 24/02/2021, 13h03

un label ne sert pas à ça; choisis un span, par exemple;

**javatwister** · 24/02/2021, 14h33

Suggestion de présentation un peu moins difficile à capter:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<h1>Calculs</h1>
 
<h2>Choisir un chiffre</h2>
<p id="num">Cliquez sur le bouton 
	<input type="button" value="0" />
	<input type="button" value="1" />
	<input type="button" value="2" />
	<input type="button" value="3" />
	<input type="button" value="4" />
	<input type="button" value="5" />
	<input type="button" value="6" />
	<input type="button" value="7" />
	<input type="button" value="8" />
	<input type="button" value="9" />
</p>
 
<h2>Choisir un opérateur</h2>
<p id="op">Cliquez sur le bouton 
	<input type="button" value="+" />
	<input type="button" value="-" />
	<input type="button" value="*" />
	<input type="button" value="/" />
</p>
 
<input type="button" id="res" value="Validez" />
<h3>Votre calcul est :</h3> 
<div id="tot"></div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
// activation du script au chargement de la page
document.addEventListener("DOMContentLoaded",()=>{
	let texte="";
// choix d'un chiffre
	document.querySelectorAll("#num input").forEach(v=>
		v.addEventListener("click",()=> {
			texte+=v.value;
			document.querySelector("#tot").textContent=texte;
		})
	)
// choix d'un opérateur
	document.querySelectorAll("#op input").forEach(v=>
		v.addEventListener("click",()=> {
			texte+=v.value;
			texte=texte.replace(/([+*/-]){2,}$/g,"$1");
			document.querySelector("#tot").textContent=texte;
		})
	)
// affichage du résultat
	document.querySelector("#res").addEventListener("click",()=> {
			texte=texte.replace(/^[*/]||[+*/-]$/g,"");
			texte=texte+ " = " + eval(texte);
 			document.querySelector("#tot").textContent = texte;
			texte="";
		})
})

Tu verras progressivement ce qui te manque (décimaux, effaçage de saisie, ajout d'opérateurs, etc.)

**EperW46** · 24/02/2021, 14h56

Merci beaucoup

Calculatrice, bug calcul avec eval()

JavaScript

Vue hybride

Discussions similaires

Partager

Partager