Addition deux variables

Version imprimable

Bonjour à tous,

Je souhaite simplement additionner 2 champs de formulaire mais je n'y arrive pas.

L'un d'entre vous serait-il bien aimable 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
41
42
43
44
45
46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<script>
var
QS = document.getElementById('quantiteS');
QM = document.getElementById('quantiteM');
quantite = QS+QM;
	prix = document.getElementById('prix');
    total = document.getElementById('total');
 
function updateTotalPrice() {
  total.innerHTML = prix.innerHTML * quantite.value;  
}
 
quantite.onchange = quantite.onkeyup = updateTotalPrice;
updateTotalPrice();
</script>
 
 
 
</head>
 
 
 
 
<body>
<table>
<tr>
<td>Quantité : <input type="number" name="quantiteS" id="quantiteS" value="0" /></td>
</tr>
<tr>
<td>Quantité : <input type="number" name="quantiteM" id="quantiteM" value="0" /></td>
</tr>
<tr>
<td>
 <span type="text" name="prix" id="prix"style="display:none">45</span>
Total : <span type="text" name="total" id="total"></span>€
</td>
</tr>
</table>
</body>
</html>

17/02/2015, 16h39
kakashi99
Salut,

tu essaye d'addition des éléments du DOM, pas des valeurs...
Code:

1 2 3 console.log(QS); // <input type="number" name="quantiteS" id="quantiteS" value="0"> console.log(QS.value); // 0
ensuite "quantite" est sensé être un nombre et pas un élément du DOM, donc tu ne peux pas faire un "onchange" ou un "onkeyup" dessus... ça il faut justement le faire sur "QS" et "QM"...

et puisque tu n'affiche pas le prix, à quoi ça sert qu'il soit dans le html ? ça peut être une variable js
Code:

1 2 var prix = 45;
18/02/2015, 10h28
Bovino
Ne pas oublier non plus que la valeur d'un champ de formulaire est une chaine et que l'opérateur + sert à concaténer les chaines. Il faudra donc transtyper en entier avant l'addition.
Il existe plusieurs techniques possibles pour ça, les plus simples (à mon sens) étant soit de multiplier par 1, soit d'utiliser le préfixe + :
Code:

1 2 3 var foo = "42", bar = "24"; console.log(+foo + bar*1);
Attention aussi à tes déclarations de variables. Il est recommandé de déclarer ses variables avec le mot clé var, mais tu ne le fais que pour la première. Pour déclarer plusieurs variables avec une seule instruction var, il faut les séparer par des virgules (voir mon exemple).

Merci pour votre aide.

Malheureusement je suis nul en javascript et le script initial est du recopiage adapté (mais qui ne fonctionne pas)
Vous allez me dire dans ce cas de consulter les docs et FAQ. Je vais le faire je le promet.

Mais pour l'heure je dois absolument résoudre ce problème.

Dans mon exemple je souhaiterais additionner le prix et quantité des T-Shirt taille S et M et afficher le résultat dans le champs TOTAL

J'ai modifié le script initial pour mieux comprendre.

Si vous pouvez m'aider sur ce coup ;)
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 <script> var QS = document.getElementById('quantiteS').value, QM = document.getElementById('quantiteM').value, prix = document.getElementById('prix').value, prix2 = document.getElementById('prix2').value, total = (parseFloat(QS) * parseFloat(prix)) + (parseFloat(QM) * parseFloat(prix2)) function updateTotalPrice() { ??? que dois-je mettre ici ?? } </script> <body onLoad="updateTotalPrice()"> <input type="text" name="QS" id="quantiteS" style="width:20px" value="0"> <input type="text" name="prix" id="prix" value="45"> <input type="text" name="QM" id="quantiteM"style="width:20px" value="0"> <input type="text" name="prix" id="prix2" value="60"> <input type="text" id="total" > <input type="submit"> </body>

salut,

essaye avec ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
//on récupère les objets du DOM qui nous interessent
var QS = document.getElementById('quantiteS');
var QM = document.getElementById('quantiteM');
var prix = document.getElementById('prix');
var prix2 = document.getElementById('prix2');
 
// on applique les listeners que l'on veut. exemple 'change'
QS.addEventListener('change', updateTotalPrice);
QM.addEventListener('change', updateTotalPrice);
prix.addEventListener('change', updateTotalPrice);
prix2.addEventListener('change', updateTotalPrice);
 
// ici on récupère la valeur des champs, on calcul et on affecte le résultat à total
function updateTotalPrice() {
  var total = (parseFloat(QS.value) * parseFloat(prix.value)) + (parseFloat(QM.value) * parseFloat(prix2.value));
  document.getElementById('total').value = total;
}
 
//on peux appeler une 1ere fois le script si valeur par défaut
updateTotalPrice();

par contre je te conseille de mettre en place des filtres afin de ne permettre à l'utilisateur de ne mettre que des chiffres positifs et séparés par un (unique) point, sinon tu auras un joli "NaN" (not a number) dans total.

Merci pour ton aide.

Cependant après ajout du code, il ne se passe rien.

Que faire ?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<script>
var QS = document.getElementById('quantiteS');
var QM = document.getElementById('quantiteM');
var prix = document.getElementById('prix');
var prix2 = document.getElementById('prix2');
 
QS.addEventListener('change', updateTotalPrice);
QM.addEventListener('change', updateTotalPrice);
prix.addEventListener('change', updateTotalPrice);
prix2.addEventListener('change', updateTotalPrice);
 
function updateTotalPrice() {
  var total = (parseFloat(QS.value) * parseFloat(prix.value)) + (parseFloat(QM.value) * parseFloat(prix2.value));
  document.getElementById('total').value = total;
}
 
updateTotalPrice(); 
</script>
</head>
 
<body onLoad="updateTotalPrice()">
 
 
<input type="text" name="QS" id="quantiteS" style="width:20px" value="0">
<input type="text" name="prix" id="prix" value="45">
 
<input type="text" name="QM" id="quantiteM"style="width:20px" value="0">
<input type="text" name="prix" id="prix2" value="60">
 
<input type="text" id="total" >
 
<input type="submit">
 
</body>
 
 
</head>
 
<body>
</body>
</html>

18/02/2015, 14h09
Bovino

Ben c'est normal... au moment où tu initialises tes variables, les éléments correspondants n'existent pas dans la page...
18/02/2015, 14h19
kakashi99

Comme Bovino le souligne tu appelles "updateTotalPrice" une fois que ta page est chargée, grâce au onload, mais l'initialisation des variables que "updateTotalPrice" utilise est faite avant que les objets du DOM existent...

donc soit tu mets ton script à la fin du "body", soit tu mets tout dans la fonction "updateTotalPrice", soit tu mets tout dans une fonction "managePrice" par exemple et c'est elle que tu appelleras dans le onload.
18/02/2015, 14h24
legrandse

Hello,

Effectivement tu m'as devancé dans ma réponse.

J'ai placé le script dans le body et çà fonctionne.

Encore merci pour l'aide.