Addition deux variables

**legrandse** · 17/02/2015, 14h46

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 :

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

**kakashi99** · 17/02/2015, 16h39

Salut,

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

Code :

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

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 :

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

1
2
 
var prix = 45;

**Bovino** · 18/02/2015, 10h28

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 :

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

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

**legrandse** · 18/02/2015, 11h55

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 :

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

**kakashi99** · 18/02/2015, 13h47

salut,

essaye avec ça

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
 
//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.

**legrandse** · 18/02/2015, 14h04

Merci pour ton aide.

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

Que faire ?

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

**Bovino** · 18/02/2015, 14h09

Ben c'est normal... au moment où tu initialises tes variables, les éléments correspondants n'existent pas dans la page...

**kakashi99** · 18/02/2015, 14h19

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.

**legrandse** · 18/02/2015, 14h24

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.

Addition deux variables

JavaScript

Discussions similaires

Partager

Partager