Nombre décimal en JavaScript

**shuggii** · 19/01/2018, 16h18

Hello,
N'étant pas dev, j'ai bidouillé un bout de code, mais je crois avoir atteins mes limites.

Je n'arrive pas à afficher les décimales (2) lorsque je calcule.

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html>
<head><style type="text/css"></style>
<meta charset="utf-8"sans bom>
<title>Tarifs</title>
</head>
<body>
<form name="Tarifs" action="" method="post">
 
	<p>
<label for="sports">Sports</label>
<select  size="1">
 <option value="boxe">Boxe</option>
 <option value="crossfit">CrossFit</option>
 <option value="cyclisme">Cyclisme</option>
 <option value="fitness">Fitness</option>
 <option value="Gymnastique">Gymnastique</option>
 </select>
		</p>
 
	<p>
	<label for="coach">Type de coach</label>
<select id="coachs"size="1">
 <option value="0" id="coach-pro">Coach professionnel</option>
</select>
		</p>
 
 
<label for="idHT">Nombre de participants</label>
<select id="idPrix"> onChange="Calcul(this.value,)" size="1"
 <option value="25€">1</option>
 <option value="15€">2</option>
<option value="11€">3</option>
 <option value="9.25€">4</option>
 <option value="8,60€">5</option>
 <option value="8€">6</option>
<option value="7.57€">7</option>
 <option value="7€">8</option>
 <option value="30€">Séance privée</option>
</select>
<br><br>
<label for="idTTC">Prix par participant</label>
<input type="text" name="TTC" id="idTTC" readonly>
 
	<button id="calc"type="button" onclick="calcPrix();">Calculer</button>
 
<br><br>
 
 <script type="text/javascript">
document.getElementById("champ_cache").style.display = "none";
function afficher(){
document.getElementById("champ_cache").style.display = "block";
}
function cacher(){
document.getElementById("champ_cache").style.display = "none";
}
         
         
         function calcPrix(){var coachselect= document.getElementById("coachs");
         var value= coachselect.options[coachselect.selectedIndex].value;
                                var Prixselect= document.getElementById("idPrix");
                                                 var prixvalue= Prixselect.options[Prixselect.selectedIndex].value;
                                        
        document.getElementById("idTTC").value  =  parseInt(value)+parseInt(prixvalue);  numObj.toFixed(2)
         }
</script>
	</form>
 
	<form name="Tarifs" action="" method="post">
 
		<p>
<label for="sports">Sports</label>
<select  size="1">
 <option value="boxe">Boxe</option>
 <option value="crossfit">CrossFit</option>
 <option value="cyclisme">Cyclisme</option>
 <option value="fitness">Fitness</option>
 <option value="Gymnastique">Gymnastique</option>
 </select>
			</p>
 
		<p>
	<label for="coach">Type de coach</label>
<select id="coachs2"size="1">
 <option value="0" id="coach-form">Coach en formation</option>
</select>
 </p>
 
<label for="idHT">Nombre de participants</label>
<select id="idPrix2"> onChange="Calcul(this.value,)" size="1"
 <option value="20€">1</option>
 <option value="12.5€">2</option>
<option value="10€">3</option>
 <option value="8.25€">4</option>
 <option value="7.60€">5</option>
 <option value="7€">6</option>
<option value="6.43€">7</option>
 <option value="6€">8</option>
 <option value="25€">Séance privée</option>
</select>
<br><br>
<label for="idTTC2">Prix par participant</label>
<input type="text" name="TTC" id="idTTC2" readonly>
 
	<button id="calc"type="button" onclick="calcPrix2();">Calculer</button>
 
<br><br>
 
 <script type="text/javascript">
document.getElementById("champ_cache").style.display = "none";
function afficher(){
document.getElementById("champ_cache").style.display = "block";
}
function cacher(){
document.getElementById("champ_cache").style.display = "none";
}
         
        function financial(x) {
  return Number.parseFloat(x).toFixed(2);
} 
        function calcPrix2(){var coachselect= document.getElementById("coachs2");
         var value= coachselect.options[coachselect.selectedIndex].value;
                                var Prixselect= document.getElementById("idPrix2");
                                                 var prixvalue= Prixselect.options[Prixselect.selectedIndex].value;
                                        
        document.getElementById("idTTC2").value =parseInt(value)+parseInt(prixvalue);    
         } 
</script>
	</form>
</body>
</html>

Questions bonus, sauriez vous comment lié les deux formulaire en un seul ?

**NoSmoking** · 20/01/2018, 10h55

Bonjour et bienvenue sur DVP.

Il te faut utiliser parseFloat(valeur) et non parseInt(valeur)

**shuggii** · 20/01/2018, 12h11

Super,

Merci NoSmoking ça fonctionne.

Une idée afin de mettre les deux formulaire en un seul ?
J'aimerais par exemple que le résultat affiche le montant correct en fonction du coach choisi et du nombre de participant. Sachant qu'il n'y a aucun lien mathématique entre les prix des coachs en formation et les coachs pro.

**Watilin** · 20/01/2018, 16h31

Salut shuggii,

avec un peu de méthode et de rigueur tu peux y arriver. Je pense que c’est une bonne idée de commencer par déplacer les scripts dans des fichiers externes. Utilise http://jsbeautifier.org/ ou les outils intégrés de Firefox (l’ardoise Maj+F4) pour formater ton code et y voir plus clair. Ensuite, mets les déclarations de fonctions ensemble, et les déclarations de variables ensemble.

Utilise la console (touche F12) pour voir les problèmes et les messages d’erreur de tes scripts.

Je te conseille également de déclarer une variable pour chaque élément sélectionné avec getElementById et de les mettre à l’extérieur de tes fonctions. En plus d’être une petite optimisation, ça te permettra d’aérer ton code.

Enfin, il ne te reste qu’à regrouper tes deux <form> dans le code HTML. À toi de voir si tu veux regrouper les deux actions calcPrix et calcPrix2 sur un seul et même bouton.

Nombre décimal en JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager