web-dev-qa-db-fra.com

HTML input type = "number" renvoyant toujours une chaîne lors d'un accès à partir de javascript

Je suis nouveau sur javascript, j'essaie d'apprendre comment fonctionne etc. dans JS et j'essaye d'ajouter 2 nombres

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS ADD</title>
</head>

<body>

  <h1>Funcitons is JS</h1>


  <input type="number" id="num1">
  <input type="number" id="num2">

  <button type="button" onclick="addNumAction()">
    Add
  </button>

  <script>
    function addNum(n1, n2) {
      return parseInt(n1) + parseInt(n2);
    }

    function addNumAction() {
      var n1 = document.getElementById("num1").value;
      var n2 = document.getElementById("num2").value;

      var sum = addNum(n1, n2);
      window.alert("" + sum);

    }
  </script>

</body>

</html>

Si je supprime le parseInt (), la valeur est traitée comme une chaîne uniquement, alors quel est l'intérêt d'utiliser <input type="number"> ?s'il te plait explique moi. quel champ utiliser pour obtenir une entrée sous forme de nombre?

javascripthtmlwebinputnumbers
20
Sainath S.R

Il est normal que vous obteniez une chaîne.

Le type de numéro a pour but que les navigateurs mobiles l'utilisent pour afficher les bons claviers et que certains navigateurs l'utilisent à des fins de validation. Par exemple, le type email affichera un clavier avec @ et '.' sur le clavier et number affichera un clavier numérique.

24
Arno Chauveau

Ni HTML ni HTTP n'ont vraiment le concept de types de données (peut-être parce qu'ils ne sont pas des langages de programmation pour commencer) et tout est une chaîne. Lorsque vous utilisez une autre langue pour accéder à ces informations, vous pouvez parfois obtenir une certaine quantité de magic en tant que fonctionnalité (par exemple, PHP générera des tableaux à partir de GET/POST champs qui ont des crochets appariés sur leurs noms), mais c'est une caractéristique de cette autre langue.

Dans ce cas, .value appartient à l'API DOM et cette API a types . Mais voyons comment cela est défini. Le <input> la balise est représentée par l'interface HTMLInputElement et la propriété value est tapez DOMString :

DOMString est une chaîne UTF-16. Comme JavaScript utilise déjà de telles chaînes, DOMString est mappé directement à une chaîne .

En d'autres termes, type="number" est un conseil pour implémenter la validation côté client et les contrôles GUI appropriés, mais l'élément sous-jacent stockera toujours les chaînes.

Numeric keyboard screen-shot

13
Álvaro González

  1. Les éléments d'entrée HTML sont documentés pour renvoyer une chaîne représentant un nombre. Voir la documentation ici: Documentation de l'entrée HTML

  2. Lorsque vous définissez input type = "number", ces champs de saisie n'acceptent pas de saisie non numérique mais en même temps, le type de valeur d'entrée "number" n'est pas défini. La raison en est que le nombre entré contient des chiffres comme sous-ensemble des caractères valides, mais ils contiennent également des caractères complètement non numériques comme des espaces, des tirets et des parenthèses.

5
secretgenes

tl; dr vous faites déjà tout correctement, continuez à utiliser parseInt.

type = "number" indique au navigateur que l'utilisateur ne doit être autorisé qu'à saisir des caractères numériques, mais au fond, il s'agit toujours d'un champ de texte.

4
webb

type="number" Uniquement pour la validation du navigateur. Mais vous obtenez une chaîne. Et vous pouvez utiliser parseInt(num1) ou + Avant la chaîne.

function addNum(n1, n2) {
  return +(n1) + +(n2);
}
1
Julia Shirokova

Vous pouvez utiliser valueAsNumber (décrit sur cette page) pour obtenir la valeur réelle du nombre. Votre code serait alors:

function addNum(n1, n2) {
  return n1 + n2;
}

function addNumAction() {
  var n1 = document.getElementById("num1").valueAsNumber;
  var n2 = document.getElementById("num2").valueAsNumber;

  var sum = addNum(n1, n2);
  window.alert("" + sum);

}
1
Chris Shepherd