JavaScript 数値入力欄の値を取得/設定する

JavaScriptの数値入力欄の値を取得/設定するサンプルです。
数値入力欄は、HTML5で追加されました。type="number"を指定します。

確認環境
・Google Chrome

目次

サンプル 値を取得する
  値を設定する

値を取得する

ボタン1を押すと数値入力欄のvalue値を取得して表示します。

数値

 

上記サンプルのコードです。

<p>数値 <span id="span2"></span></p>
<input type="number" id="number2" value="30" max="2000" />
<input type="button" value="ボタン1" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const number2 = document.getElementById("number2");
    document.getElementById("span2").textContent = number2.value;
  }
</script>

2行目は、数値入力欄です。
7行目は、getElementByIdメソッドで2行目のID「number2」を指定して対象を特定(2行目)しています。
8行目は、value値を画面に表示しています。

Idを指定しない場合

getElementByIdでIdを指定しない場合は、フォームとnameを指定します。

<p>数値 <span id="span1"></span></p>
<form name="form1">
  <input type="number" name="number1" value="20" max="1000" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const number1 = document.form1.number1;
    document.getElementById("span1").textContent = number1.value;
  }
</script>

9行目は、フォームのname「form1」と数値入力欄のname「number1」で対象を特定(3行目)しています。

 

値を設定する

ボタンを押すと数値入力欄のvalueに値(2000)を設定するサンプルです。

 

上記サンプルのコードです。

<input type="number" id="number3" value="30" max="2000" />
<input type="button" value="ボタン2" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const number2 = document.getElementById("number3");
    number3.value = "2000";
  }
</script>

1行目は、数値入力欄です。
6行目は、getElementByIdメソッドでID「number3」を指定して対象を特定(1行目)しています。
7行目は、valueに値を設定しています。

Idを指定しない場合

getElementByIdでIdを指定しない場合は、フォームとnameを指定します。

<form name="form1">
  <input type="number" id="number2" value="30" max="2000" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const number2 = document.form1.number2;
    number2.value = "2000";
  }
</script>

8行目は、フォームのname「form1」と数値入力欄のname「number2」で対象を特定(2行目)しています。

以下は、MDNのtype="number"のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/number

関連の記事

JavaScript ラジオボタンの値を取得/設定する
JavaScript チェックボックスの値を取得/設定する
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定する
JavaScript テキストボックスの値を取得/設定する
JavaScript テキストエリアの値を取得/設定する
JavaScript リストボックスの値を取得/設定する

△上に戻る