Additionner la valeur de 2 inputs

Version imprimable

29/12/2017, 16h37
LilAngel

Additionner la valeur de 2 inputs

Bonjour tout le monde!
J’ai un exercice à faire en Js et je bloque sur la 2ème question, ce qui m’empêche de continuer.. j’ai essayé plusieurs scripts, rien ne fonctionne. Dans mon index.html j’ai deux inputs, un bouton et une div. Lorsque l’utilisateur tape un nombre ds chaque input puis clique sur Ok, les deux nombres sont additionnés et le résultat s’affiche dans la div. J’ai bien mis une id à chaque inputs, au bouton et à la div.
Merci de votre aide :)
29/12/2017, 17h19
Beginner.

Salut,

Ben postez le html pour qu'on travaille à partir de là...

Les inputs sont de type numérique ou texte ?

Ok, voici le code html:

Code:

1
2
3
4
5
6
<form id="container">
		<input id="input1" type="text" value=""/>
		<input id="input2" type="text" value=""/>
		<button>OK</button>
		<div id="result"></div>
</form>

29/12/2017, 18h23
Beginner.

Voici un exemple : http://jsbin.com/yewenopise/edit?html,output

J'ai enlevé la balise <form>...
29/12/2017, 18h37
LilAngel

Hoo merveilleux merci!
30/12/2017, 16h08
NoSmoking

Bonjour,
:faq: Pourquoi mes deux valeurs se concatènent au lieu de s'additionner ?
30/12/2017, 16h50
Beginner.

Salut,

Merci pour ce rappel important...

Je ne suis pas tombé dans le piège* mais c'est vrai que ça peut passé inaperçu d'où l'importance de ce rappel notamment pour que LilAngel fasse attention à ce point...

* Car j'ai ajouté un "+" juste devant, j'ai cru comprendre que c'était aussi efficace que les fonctions parseInt() et parseFloat() ???

EDIT : Ah mais d'ailleurs ce que j'ai utilisé est indiqué juste après :

Citation:

Il existe d'autres méthodes pour transtyper une chaîne de caractères en numérique :

en utilisant l'opérateur + en préfixe ;
...

Yes merci!
Je ne connaissais pas l'utilisation du +, du coup je l'ai apprise parce que ne la comprenant pas, je l'ai enlevée pour voir ce que ca faisait et en effet, ça concatène :D Bref, merci à vous pour votre aide et explications :) Vous êtes en OR !.

Est-ce que j'en profite pour mettre un autre bout de code, sur lequel je bosse depuis hier mais.. je n'y arrive pas ! ou je poste ailleurs..? c'est un peu le même sujet donc je poste ici.

Dans cet exercice l'utilisateur tape un nombre dans chaque input. Et chaque fois que l'on tape au clavier dans l'un des deux input, et si les deux inputs sont remplis, on additionne les deux nombres et on affiche le résultat dans #result

Ci dessous le html suivi de mon script (qui ne marche pas .. je ne trouve pas pas l'erreur)
Code:

1 2 3 4 5 <form id="container"> <input type="text" id="input1" /> <input type="text" id="input2" /> <div id="result"></div> </form>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var field1 = parseFloat(document.getElementById('input1').value); var field2 = parseFloat(document.getElementById('input2').value); // Je contrôle l'évènement lorsque l'on rempli un input: document.addEventListener('keypress', tot); //j’envoie la fonction qui additionne si mes deux inputs sont remplis: function tot () { if (field1 !== '' && field2 !== '') { var total = parseFloat(field1) + parseFloat(field2); return total; } //Je mets le résultat de l'addition dans la div result du html: document.getElementById('result').innerHTML = total; }

30/12/2017, 22h04
NoSmoking

Citation:

Est-ce que j'en profite pour mettre un autre bout de code, sur lequel je bosse depuis hier mais.. je n'y arrive pas ! ou je poste ailleurs..?

Il est effectivement préférable de poster cette nouvelle question dans une autre discussion.

Bonjour,

Je me suis amusé un peu, sans attendre qu'une nouvelle discussion ne soit postée.

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
<!DOCTYPE html>
<html>
<head>
<script>
 
// Je contrôle l'évènement lorsque l'on rempli un input:
document.addEventListener('input', tot);
 
// J’envoie la fonction qui additionne si mes deux inputs sont remplis:
function tot () {
  var field1 = document.getElementById('input1').value;
  var field2 = document.getElementById('input2').value;
  if (field1 !== '' && field2 !== '') {
    var total = (1*field1) + (1*field2);
    document.getElementById('result').innerHTML = total;
  }
}
 
</script>
</head>
 
<body>
<input type="text" id="input1"> + <input type="text" id="input2"> = <output id="result">
</body>
 
</html>

Bon bout d'an à tous.