Discussion :

[OUZFA]

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

[ProgElecT]

Salut

Essaies comme ceci

Code :

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

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

[Archimède]

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

Code :

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

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

[OUZFA]

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

[NoSmoking]

Bonjour,
une explication est donnée dans la
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 :

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

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