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):
Ces fonctions reprennent la valeur de mon input 'principal' et rajoutent le caractère demandé à la fin, comme sur une calculatrice classique.
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*/
Et voici l'input dans le html :
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 :/
Code : Sélectionner tout - Visualiser dans une fenêtre à part <input type="number" id="principal"></input>
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 :
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.
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*/ }
Voici le code dans son ensemble (HTML, CSS, JS) :
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 <!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>
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 * { 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; }
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
Partager