Additionner la valeur de 2 inputs

**LilAngel** · 29/12/2017, 16h37

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

**Beginner.** · 29/12/2017, 17h19

Salut,

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

Les inputs sont de type numérique ou texte ?

**LilAngel** · 29/12/2017, 17h55

Ok, voici le code html:

Code HTML :

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

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>

**Beginner.** · 29/12/2017, 18h23

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

J'ai enlevé la balise <form>...

**LilAngel** · 29/12/2017, 18h37

Hoo merveilleux merci!

**NoSmoking** · 30/12/2017, 16h08

Bonjour,

Pourquoi mes deux valeurs se concatènent au lieu de s'additionner ?

**Beginner.** · 30/12/2017, 16h50

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 :

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

**LilAngel** · 30/12/2017, 20h02

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

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

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

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

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

**NoSmoking** · 30/12/2017, 22h04

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.

**eleydet** · 31/12/2017, 09h50

Bonjour,

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

Code HTML :

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

Additionner la valeur de 2 inputs

JavaScript

Discussions similaires

Partager

Partager