toFixed(2) oui mais où et comment le mettre.

**danielos** · 11/04/2017, 10h29

Bonjour à toutes et à tous,

Mon code ci-dessous fonctionnait jusqu'à ce que je cherche à n'avoir que des nombres avec 2 chiffres derrières le séparateur.
Au travers des différentes lectures, j'ai cru comprendre qu'il suffisait d'utiliser "toFixed(2)" mais à priori, j'ai pas saisi la manière de le mettre en place !
L'argument "toFixed(2)" est dans le second script. Si je l'enlève sur les 3 lignes, je retrouve mon code précédent qui fonctionne parfaitement mais qui ne formate pas les saisies comme souhaitées ;-(

Le premier script sert à remplacer une virgule saisie malencontreusement par un point (c'est nickel). Cela n'a rien à voir avec mon problème mais je l'ai laissé pour la cohérence des arguments des inputs.

J'ai également une seconde question (mais peut-être aurais-je du ouvrir un autre post). Lorsque l'on a 2 fonctions comme c'est le cas, peut-on mettre les 2 fonctions dans un seul script ou faut-il obligatoirement un script par fonction ?

Je ne pense pas qu'il soit nécessaire de préciser que je ne suis pas un professionnel ;-)
Je suis même confus de venir avec mon problème à 2 balles et je remercie d'avance celui ou celle qui aura la patience de m'aider.

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
<html>
<head>
<title>Cotisations : €</title>
 
<script language="javascript" type="text/javascript">
function noVirgule(obj)
{
obj.value=obj.value.replace(/,/g,'.')
}
</script>
 
<script language="javascript" type="text/javascript"> 
function CalculRecette() {
val1 = parseFloat(document.forms[0].elements["Rec_Cotis"].value);
if (isNaN(val1) == true ) val1=0;
val2 = parseFloat(document.forms[0].elements["Rec_Sub"].value);
if (isNaN(val2) == true ) val2=0;
val3 = parseFloat(document.forms[0].elements["Rec_Organis"].value);
if (isNaN(val3) == true ) val3=0;
 
document.forms[0].elements["tot_Rec"].value = val1 + val2 + val3
}
</script>
 
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<form method="post" action="Bilan.php">  
<p>&nbsp;</p>
<p>Cotisations :&nbsp;<input type="text" name="Rec_Cotis" id="Rec_Cotis" size="20" style="text-align:right" onkeyup="noVirgule(this);" onchange="CalculRecette();" placeholder="0.00" />€</p>
<p>Subventions :&nbsp;<input type="text" name="Rec_Sub" id="Rec_Sub" style="text-align:right;" onkeyup="noVirgule(this);" onchange="CalculRecette()" placeholder="0.00" />€</p>
<p>Organisations :&nbsp;<input type="text" name="Rec_Organis" id="Rec_Organis" style="text-align:right;" onkeyup="noVirgule(this);" onchange="CalculRecette()" placeholder="0.00" />€</p>
<p>TOTAL RECETTES :&nbsp;<input type="text" name="tot_Rec" id="tot_Rec" style="text-align:right;" size="20">€</p>
<p>&nbsp;</p>
</form>
 
<p><input type="submit" value="Envoyer" /></p> 
</body>
 
</html>

Merci
Daniel

**melka one** · 11/04/2017, 11h16

jour

il faut le mettre apres le parseFloat

Code :

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

val1 = parseFloat(document.forms[0].elements["Rec_Cotis"].value).toFixed(2);

Code :

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

1
2
val1 = parseFloat(document.forms[0].elements["Rec_Cotis"].value);
val1 = val1.toFixed(2)

**danielhagnoul** · 11/04/2017, 11h44

Envoyé par danielos

[...] J'ai également une seconde question (mais peut-être aurais-je du ouvrir un autre post). Lorsque l'on a 2 fonctions comme c'est le cas, peut-on mettre les 2 fonctions dans un seul script ou faut-il obligatoirement un script par fonction ? [...]

On peut y mettre autant de fonctions que l'on veut tant que la taille du script est raisonnable et qu'il y a un lien quelconque entre les fonctions.

**danielos** · 11/04/2017, 12h09

Bonjour melka one,
Merci pour t'être penché sur mon pb.
Je dois vraiment être une bille car aucun de tes codes ne fonctionnent.
Le 1er concatène les valeurs
Le second ne semble pas avoir d'action.
snif...
Daniel

**melka one** · 11/04/2017, 13h29

met une alert pour connaitre la valeur de val1

Code :

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

1
2
val1 = parseFloat(document.forms[0].elements["Rec_Cotis"].value);
alert(val1)

**danielos** · 11/04/2017, 17h15

En mettant une alert, la val1 me donne bien le nombre que je souhaiterais.
exemple, si je tape 4, l'alert donne 4.00
ça c'est nickel mais l'affichage dans le input de la valeur1 reste 4, et surtout le total affiche 4.000.000.00

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
<html>
<head>
<title>Cotisations : €</title>
 
<script language="javascript" type="text/javascript">
function noVirgule(obj)
{
obj.value=obj.value.replace(/,/g,'.')
}
</script>
 
<script language="javascript" type="text/javascript"> 
function CalculRecette() {
 
val1 = parseFloat(document.forms[0].elements["Rec_Cotis"].value);
if (isNaN(val1) == true ) val1=0;
val1 = val1.toFixed(2)
alert(val1)
val2 = parseFloat(document.forms[0].elements["Rec_Sub"].value);
if (isNaN(val2) == true ) val2=0;
val2 = val2.toFixed(2)
val3 = parseFloat(document.forms[0].elements["Rec_Organis"].value);
if (isNaN(val3) == true ) val3=0;
val3 = val3.toFixed(2)
 
document.forms[0].elements["tot_Rec"].value = val1 + val2 + val3
}
</script>
 
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<form method="post" action="Bilan.php">  
<p>&nbsp;</p>
<p>Cotisations :&nbsp;<input type="text" name="Rec_Cotis" id="Rec_Cotis" size="20" style="text-align:right" onkeyup="noVirgule(this);" onchange="CalculRecette();" placeholder="0.00" />€</p>
<p>Subventions :&nbsp;<input type="text" name="Rec_Sub" id="Rec_Sub" style="text-align:right;" onkeyup="noVirgule(this);" onchange="CalculRecette()" placeholder="0.00" />€</p>
<p>Organisations :&nbsp;<input type="text" name="Rec_Organis" id="Rec_Organis" style="text-align:right;" onkeyup="noVirgule(this);" onchange="CalculRecette()" placeholder="0.00" />€</p>
<p>TOTAL RECETTES :&nbsp;<input type="text" name="tot_Rec" id="tot_Rec" style="text-align:right;" size="20">€</p>
<p>&nbsp;</p>
</form>
 
<p><input type="submit" value="Envoyer" /></p> 
</body>
 
</html>

**melka one** · 11/04/2017, 18h05

fait comme ceci

Code :

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

document.forms[0].elements["tot_Rec"].value = Number(val1) + Number(val2) + Number(val3)

**danielos** · 11/04/2017, 18h59

Merci melka one, le total est bon.
Je vais fouiller maintenant pour que les Number(valx) remplace les valx dans les inputs.
Je vais fermer le sujet. Merci encore.

**NoSmoking** · 15/04/2017, 15h13

Bonjour,
il me semble utile de revenir sur certains points !

• entête HTML, tout code HTML devrait commencer par

Code html :

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

<!doctype html>

• ne pas omettre une <meta charset> qui évitera tôt ou tard des problème d'accents comme par exemple

Code html :

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

1
2
<meta charset="UTF-8"> 
<title>Convertisseur €</title><!-- € sera bien pris en compte -->

• type et langage de la balise <script> :
ceci est obsolète

Code html :

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

1
2
3
<script language="javascript" type="text/javascript">
// ... le code ...
</script>

et est avantageusement remplaçable en HTML5 par un simple

Code :

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

1
2
3
<script>
// ... le code ...
</script>

• Maintenant le principal :
reprenons ta fonction et regardons le type des variables à chaque étape (voir commentaires):

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
function CalculRecette() {
  val1 = parseFloat(document.forms[0].elements['Rec_Cotis'].value);
  if (isNaN(val1) == true) val1 = 0;
  // ici val1 est de type number
  val1 = val1.toFixed(2)
  // ici val1 est de type string
  alert(typeof val1)
  val2 = parseFloat(document.forms[0].elements['Rec_Sub'].value);
  if (isNaN(val2) == true) val2 = 0;
  // ici val2 est de type number  
  val2 = val2.toFixed(2)
  // ici val2 est de type string  
  val3 = parseFloat(document.forms[0].elements['Rec_Organis'].value);
  if (isNaN(val3) == true) val3 = 0;
  // ici val3 est de type number  
  val3 = val3.toFixed(2)
  // ici val1 à val3 sont de type string danc le + concaténe
  document.forms[0].elements['tot_Rec'].value = val1 + val2 + val3
}

le résultat est donc conforme à ce que tu demandes.

Voici maintenant comment on aurait pu écrire ta fonction non simplifiée

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
function calculRecette() {
  // récup. des éléments à traiter
  var elemVal_1 = document.querySelector('#Rec_Cotis');
  var elemVal_2 = document.querySelector('#Rec_Sub');
  var elemVal_3 = document.querySelector('#Rec_Organis');
  var elemSomme = document.querySelector('#tot_Rec');
  // récup des valeurs ou de zéro en cas d'erreur de saisie
  var val_1 = parseFloat(elemVal_1.value) || 0;
  var val_2 = parseFloat(elemVal_2.value) || 0;
  var val_3 = parseFloat(elemVal_3.value) || 0;
  // réaffichage au format pour visuel
  elemVal_1.value = val_1.toFixed(2);
  elemVal_2.value = val_2.toFixed(2);
  elemVal_3.value = val_3.toFixed(2);
  // calcul et affichage  
  var somme = val_1 + val_2 + val_3;
  elemSomme.value = somme.toFixed(2);
}

là il n'y a plus d'embrouilles possible

Nota : on aurait également pu se servir des name pour récupérer les éléments se qui éviterait d'ajouter des ID inutiles.

**danielos** · 17/04/2017, 08h53

Bonjour à toutes et à tous et surtout à NoSmoking,

Merci pour ces réponses (qui sont plus qu'un rappel pour moi).
C'est génial car car effectivement pile poil ce que je souhaitais (et avec les explication en plus ! Merci 1000 fois).
Juste une précision pour le cas où la partie de code intéresserait quelqu'un, il faut juste corriger le titre de la fonction calculRecette() en mettant une majuscule pour avoir CalculRecette()
Sinon c'est super.
Encore merci à toutes et à tous qui transmettez votre savoir.

toFixed(2) oui mais où et comment le mettre.

JavaScript

Discussions similaires

Partager

Partager