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