JavaScriptの数値入力欄の値を取得/設定するサンプルです。
目次
| サンプル | 数値入力欄とは |
| 値を取得する | |
| 値を設定する |
数値入力欄とは
以下は実際の数値入力欄です。
上記数値入力欄のhtmlのコードです。
<input type="number" id="num1" value="" min="1" max="5" />
数値入力欄は、数値入力時に使用します。
入力欄の右にでてくる上三角を押すと数値が上がり、下三角を押すと数値が下がります。
inputタグでtypeにnumberを指定します。
minは最小値で、maxは最大値です。
入力された値はJavaScriptで取得できます。
値を取得する
ボタン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
関連の記事