Demande de conseils pour calculatrice en JS

**Victofu** · 24/04/2017, 12h25

Bonjour,

Je programme actuellement une calculatrice en html et js qui marche plutôt bien, cependant j'ai quelques problèmes que je n'arrive pas à résoudre.

J'ai créé une fonction pour les boutons de chaque chiffre et pour la virgule, elles ressemblent à ça (j'ai créé des boutons qui exécutent chacun une de ces fonctions):

Code :

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
function zero(){
  document.getElementById('principal').value = document.getElementById('principal').value + "0"; }
 
function un(){
  document.getElementById('principal').value = document.getElementById('principal').value + "1"; }
 
function deux(){
  document.getElementById('principal').value = document.getElementById('principal').value + "2"; }
 
function trois(){
  document.getElementById('principal').value = document.getElementById('principal').value + "3"; }
 
function quatre(){
  document.getElementById('principal').value = document.getElementById('principal').value + "4"; }
 
function cinq(){
  document.getElementById('principal').value = document.getElementById('principal').value + "5"; }
 
function six(){
  document.getElementById('principal').value = document.getElementById('principal').value + "6"; }
 
function sept(){
  document.getElementById('principal').value = document.getElementById('principal').value + "7"; }
 
function huit(){
  document.getElementById('principal').value = document.getElementById('principal').value + "8"; }
 
function neuf(){
  document.getElementById('principal').value = document.getElementById('principal').value + "9"; }
 
function virgule(){
  document.getElementById('principal').value = document.getElementById('principal').value + "."; } /*Marche pas*/

Ces fonctions reprennent la valeur de mon input 'principal' et rajoutent le caractère demandé à la fin, comme sur une calculatrice classique.

Et voici l'input dans le html :

Code :

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

<input type="number" id="principal"></input>

Cependant la fonction qui s'occupe de la virgule ne fonctionne pas. Lorsque je l'utilise elle supprime simplement le contenu de 'principal'. Ce que je ne comprends pas est qu'il est possible de mettre des virgules et points manuellement dans l'input mais ma fonction ne parvient pas à les insérer :/

De plus, ma fonction Clear chargée de supprimer l'input ne marche absolument pas et ne semble même pas se faire appeler, le code ci-dessous vous parlera sûrement plus :

Code :

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

1
2
3
4
5
6
7
function clear(){
  alert("test"); /* Pour tester si elle se fait call par le bouton*/
  document.getElementById('principal').value = "";
  document.getElementById ('memoire').value = "";
  memoireSigne = 0;
  resultat = 0;
  alert("test"); /* Pour tester si elle se fait call par le bouton*/ }

Je suis conscient que le code dans son ensemble est très mal écrit mais c'est mon premier et c'était juste pour tester, si vous avez quelques conseils n'hésitez je suis plus que preneur.

Voici le code dans son ensemble (HTML, CSS, JS) :

HTML

Code :

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>X</title>
<link href="Calculs.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<script type="text/javascript" src="Calculs.js"></script>
 
<div>
 
<input type="number" id="memoire"></input>
<input type="number" id="principal"></input>
 
<table id="pad_principal">
	<tr>
		<td id="sept" onclick="sept()">7</td>
		<td id="huit" onclick="huit()">8</td>
		<td id="neuf" onclick="neuf()">9</td>
	</tr>
	<tr>
		<td id="quatre" onclick="quatre()">4</td>
		<td id="cinq" onclick="cinq()">5</td>
		<td id="six" onclick="six()">6</td>
	</tr>
	<tr>
		<td id="un" onclick="un()">1</td>
		<td id="deux" onclick="deux()">2</td>
		<td id="trois" onclick="trois()">3</td>
	</tr>
	<tr>
		<td id="zero" onclick="zero()">0</td>
		<td id="virgule" onclick="virgule()"><strong>,</strong></td>
		<td id="egal" onclick="egal()">=</td>
	</tr>
</table>
 
<table id="pad_signes">
	<tr>
		<td id="clear" onclick="clear()">C</td>
	</tr>
	<tr>
		<td id="plus" onclick="plus()">+</td>
		<td id="moins" onclick="moins()">-</td>
	</tr>
	<tr>
		<td id="fois" onclick="fois()">x</td>
		<td id="divise" onclick="divise()">÷</td>
</table>
 
</div>
 
</body>
</html>

CSS

Code :

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
* {
  font: bold 14px Arial, sans-serif; }
 
 
body {
  background-color: #6ad0f2; }
 
input {
  width:300px;
  height:30px;
  margin-left: 38%;
  text-align: center;
  background: radial-gradient(circle, #ffffff 1%, #e0e0e0);
  border:2px solid #5bafff;
  border-radius: 20px; }
 
#memoire {
  margin-top: 75px; }
 
table {
  display: inline;
  margin-left: 37.5%;
  border-collapse: separate;
  border-spacing: 9px 9px;
  margin-top: 12px; }
 
#pad_signes {
  margin-top: 10%;
  margin-left:0px; }
 
td {
  border-spacing: 2px 50px;
  height:35px;
  width:65px;
  border-radius: 12px;
  text-align: center;
  background-color: white;
  transition-duration: 0.2s;
  transition-property: background-color;
  box-shadow:0px 4px 0px #4c95ad; }
 
td:hover {
  background-color: #b5a2e8;
  cursor:pointer; }
 
td:active {
  box-shadow:0px 3px 0px #053f01 inset; }
 
#egal {
  background-color: #ffffaa; }
 
#egal:hover {
  background-color: #ffff68; }
 
#clear {
  background-color: #ff9999; }
 
#clear:hover {
  background-color: #fc6f6f; }

JavaScript

Code :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
function zero(){
  document.getElementById('principal').value = document.getElementById('principal').value + "0"; }
 
function un(){
  document.getElementById('principal').value = document.getElementById('principal').value + "1"; }
 
function deux(){
  document.getElementById('principal').value = document.getElementById('principal').value + "2"; }
 
function trois(){
  document.getElementById('principal').value = document.getElementById('principal').value + "3"; }
 
function quatre(){
  document.getElementById('principal').value = document.getElementById('principal').value + "4"; }
 
function cinq(){
  document.getElementById('principal').value = document.getElementById('principal').value + "5"; }
 
function six(){
  document.getElementById('principal').value = document.getElementById('principal').value + "6"; }
 
function sept(){
  document.getElementById('principal').value = document.getElementById('principal').value + "7"; }
 
function huit(){
  document.getElementById('principal').value = document.getElementById('principal').value + "8"; }
 
function neuf(){
  document.getElementById('principal').value = document.getElementById('principal').value + "9"; }
 
function virgule(){
  document.getElementById('principal').value = document.getElementById('principal').value + ","; } /*Marche pas*/
 
 
 
var memoireSigne;
var resultat;
 
 
function changeCases(){
  document.getElementById('memoire').value = document.getElementById('principal').value;
  document.getElementById('principal').value = ""; }
 
function clear(){
  alert("test"); /* Pour tester si elle se fait call par le bouton*/
  document.getElementById('principal').value = "";
  document.getElementById ('memoire').value = "";
  memoireSigne = 0;
  resultat = 0;
  alert("test"); /* Pour tester si elle se fait call par le bouton*/ }
 
function plus(){                                                             /*  Exemple valable pour les fonctions du même genre :  */
  if(document.getElementById('memoire').value == "") {changeCases();}             /*  if memoire vide on écrit la valeur de l'input principal dans la memoire et on clear le principal  */
  else {egal();                                                                  /*  else on execute la f egal() (on fait l'opération avec le dernier signe demandé et on attribut la valeur à la var resultat ect.. (voir f egal() )) */
        document.getElementById('memoire').value = resultat;                      /*  puis on met le resultat dans memoire  */
        document.getElementById('principal').value = "";}                         /*  et on clear le principal  */
  memoireSigne = 1; }                                                           /*  Pour finir on change memoireSigne.  */
 
function moins(){
  if(document.getElementById('memoire').value == "") {changeCases();}
  else  {egal();
        document.getElementById('memoire').value = resultat;
        document.getElementById('principal').value = "";}
  memoireSigne = 2; }
 
function fois(){
  if(document.getElementById('memoire').value == "") {changeCases();}
  else  {egal();
        document.getElementById('memoire').value = resultat;
        document.getElementById('principal').value = "";}
  memoireSigne = 3; }
 
function divise(){
  if(document.getElementById('memoire').value == "") {changeCases();}
  else  {egal();
        document.getElementById('memoire').value = resultat;
        document.getElementById('principal').value = "";}
  memoireSigne = 4; }
 
 
 
function egal(){
  if (memoireSigne == 1) {
    resultat = parseFloat(document.getElementById('memoire').value) + parseFloat(document.getElementById('principal').value);}
 
  if (memoireSigne == 2) {
    resultat = parseFloat(document.getElementById('memoire').value) - parseFloat(document.getElementById('principal').value);}
 
  if (memoireSigne == 3) {
    resultat = parseFloat(document.getElementById('memoire').value) * parseFloat(document.getElementById('principal').value);} 
 
  if (memoireSigne == 4) {
    resultat = parseFloat(document.getElementById('memoire').value) / parseFloat(document.getElementById('principal').value);}   
 
document.getElementById('principal').value = resultat;
document.getElementById('memoire').value = ""; }

Merci

**danielhagnoul** · 24/04/2017, 13h32

clear n'est pas un mot réservé, mais il l'est de facto, car il a été utilisé ailleurs, donc il suffit de le renommer en clearValue() par exemple.

un input du type number ne peut pas contenir une virgule seulement un point. C'est signaler dans la console (touche F12) par un avertissement peu explicite : test62.html:108 The specified value "4," is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

Si vous examiner l'expression régulière, on voit qu'il accepte uniquement le point : https://regexper.com/#-%3F(%5Cd%2B%7...%3F%5Cd%2B)%3F

**Victofu** · 25/04/2017, 19h34

Effectivement, le mot clear ne fonctionne pas.

Merci beaucoup !

Demande de conseils pour calculatrice en JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager