Faire la somme de 2 inputs type number

Bonsoir à tous,
j'ai un petit problème auquel je ne trouve pas d'explication.

Je veux additionner deux inputs de type "number" et mettre le résultat dans une un troisième input de type "number" aussi.

J'ai écrit: document.getElementById('input3').value = document.getElementById('input1').value + document.getElementById('input2').value;.

le résultat que je reçoit n'est pas une addition mais juste une concaténation des valeurs des deux inputs (valeur1Valeur2); c'est à dire que si la valeur de input1 est: 5 et la valeur de Input2 est: 8 alors le résultat est 58 (5 collé à 8), au lieu de 13 (5 + 8).

Pourtant les 3 inputs sont de type "number" et non pas de type "text".

Ce qui est étonnant, avec une multiplication, ça marche bien: si je fait document.getElementById('input3').value = document.getElementById('input1').value * document.getElementById('input2').value;, je reçoit bien 40 dans Input3

Quelqu'un aurait une explication, svp ?

MERCI

Salut

Essaies comme ceci

Code:

---

1 2 3

//document.getElementById('input3').value = document.getElementById('input1').value + document.getElementById('input2').value; //en modifiant de cette façon document.getElementById('input3').value = Number(document.getElementById('input1').value) + Number(document.getElementById('input2').value);

---

Il faut utiliser parseInt ou parseFloat si tu veux faire ça correctement...

Code:

---

1 2	document.getElementById('3').value = parseFloat(document.getElementById('2').value) +parseFloat( document.getElementById('1').value);

---

et utilise des inputs de type number...

L'attribut value contient une chaîne de caractères (DOMString) qui correspond à la valeur contenue dans le champ texte...
Alors pourquoi ça marche sur un produit, je n'en sais rien...

Merci Archimede,
Tu as raison, c'est ce qu'il fallait faire (ParseFloat). J'avais essayé avec ParseInt mais cela n'avait pas marché.
Merci ProgElect aussi.

Bonne continuation à tous ;)

Bonjour,
une explication est donnée dans la
:faq:Pourquoi mes deux valeurs se concatènent au lieu de s'additionner ?.

Il existe également, depuis la prise en compte du HTML5, et donc l'arrivée des <input type="number"> un attribut valueAsNumber qui rend plus simple la récupération

Code:

---

1 2 3 4 5 6 7

// Utilisation de : valueAsNumber attribute // The valueAsNumber IDL attribute represents the value of the element, interpreted as a number. // Il existe un petit correctif pour IE https://gist.github.com/jonathansampson/c9071cc90e0014f4859f function calculSomme(){ const somme = elemVal1.valueAsNumber + elemVal2.valueAsNumber; elemResult.textContent = somme; }

---

Une méthode de récupération de plus qui me semble être plus logique attendu de la spécificité de ce type d'<input>.