web-dev-qa-db-ja.com

HTML入力type = "number"は、javascriptからアクセスしたときに文字列を返します

私はjavascriptが初めてで、JSの機能などを学び、2つの数字を追加しようとしています

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

ParseInt（）を削除すると、値は文字列のみとして扱われます。<input type="number">を使用する意味は何ですか？入力を数値として取得するために使用するフィールドは何ですか？

javascripthtmlwebinputnumbers
20
Sainath S.R

通常、文字列を取得します。

番号タイプの目的は、モバイルブラウザがこれを使用して正しいキーボードを表示することであり、一部のブラウザはこれを検証目的で使用することです。たとえば、emailタイプは、@と '。'が付いたキーボードを表示します。キーボードでnumberは数字キーボードを表示します。

24
Arno Chauveau

HTMLもHTTPもデータ型の概念を実際に持っておらず（おそらく、最初からプログラミング言語ではないため）、すべてが文字列です。別の言語を使用してその情報に到達すると、機能としてmagicが得られる場合があります（たとえば、PHPは配列を生成します名前に角括弧がペアになっているGET/POSTフィールド）が、これは他の言語の機能です。

この場合、 .valueはDOM APIに属し、そのようなAPIには types があります。しかし、それがどのように定義されているか見てみましょう。 <input>タグは HTMLInputElement interface で表され、valueプロパティは type DOMString のものです。

DOMStringはUTF-16文字列です。 JavaScriptはすでにそのような文字列を使用しているため、DOMStringはStringに直接マッピングされます。

言い換えると、 type="number"は、クライアント側の検証と適切なGUIコントロールを実装するためのヒントですが、基になる要素には引き続き文字列が格納されます。

Numeric keyboard screen-shot

13
Álvaro González

  1. HTML入力要素は、数値を表す文字列を返すように文書化されています。こちらのドキュメントを参照してください。 HTML入力のドキュメント

  2. Input type = "number"を設定すると、これらの入力フィールドは非数値入力を受け入れませんが、同時に入力値タイプを "number"にしません。入力された数字には、有効な文字のサブセットとして数字が含まれていますが、スペース、ハイフン、括弧などの完全に非数字の文字も含まれています。

5
secretgenes

tl; drすでにすべてを正しく行っているので、parseIntを使い続けるだけです。

type = "number"は、ユーザーに数字文字の入力のみを許可するようにブラウザに指示しますが、深いところまではテキストフィールドのままです。

4
webb

_type="number"_は、ブラウザーの検証専用です。しかし、文字列を取得します。また、文字列の前にparseInt(num1)または_+_を使用できます。

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

valueAsNumber （そのページで説明）を使用して、実際の数値を取得できます。したがって、コードは次のようになります。

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