Demande de conseils pour calculatrice en JS

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:

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:

<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:

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:

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:

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:

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 ;)