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

Version imprimable

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:

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> </p> <p>Cotisations : <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 : <input type="text" name="Rec_Sub" id="Rec_Sub" style="text-align:right;" onkeyup="noVirgule(this);" onchange="CalculRecette()" placeholder="0.00" />€</p> <p>Organisations : <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 : <input type="text" name="tot_Rec" id="tot_Rec" style="text-align:right;" size="20">€</p> <p> </p> </form> <p><input type="submit" value="Envoyer" /></p> </body> </html>
Merci
Daniel

11/04/2017, 11h16
melka one
jour

il faut le mettre apres le parseFloat

Code:

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

1 2 val1 = parseFloat(document.forms[0].elements["Rec_Cotis"].value); val1 = val1.toFixed(2)
11/04/2017, 11h44
danielhagnoul

Citation:

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.
11/04/2017, 12h09
danielos

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

met une alert pour connaitre la valeur de val1
Code:

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

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:

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>

11/04/2017, 18h05
melka one

fait comme ceci

Code:

document.forms[0].elements["tot_Rec"].value = Number(val1) + Number(val2) + Number(val3)
11/04/2017, 18h59
danielos

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.

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

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

Code:

<!doctype html>

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

Code:

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:

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

et est avantageusement remplaçable en HTML5 par un simple

Code:

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

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

Code:

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:

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.

17/04/2017, 08h53
danielos

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.