JavaScript 数値入力欄の値を取得/設定するサンプル

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

確認環境
・Windows 10
・Google Chrome

目次

フォームとnameでvalue値を取得/設定する

ボタンを押すと数値入力欄のvalueに値を設定し取得するサンプルです。
フォーム(form)と数値入力欄の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()">
<input type="button" value="クリア" onclick="clickBtn2()">

<script>
function clickBtn1(){

	const number1 = document.form1.number1;

	// 値を設定
	number1.value = "1000";
	//document.form1.number1.value = "1000";
	// 値を取得
	document.getElementById("span1").textContent = number1.value;
}
function clickBtn2(){
	document.form1.number1.value = ""; //クリア
	document.getElementById("span1").textContent = "";
}
</script>

3行目は、数値入力欄です。
11行目は、フォームのname「form1」と数値入力欄のname「number1」で対象を特定(3行目)しています。
14行目は、valueに値を設定しています。
15行目は、14行目と同じ意味です。「document.form1.number1」は、17行目でも使用するので11行目で変数にセットしています。
17行目は、value値を取得しています。

 

getElementByIdメソッドでvalue値を取得/設定する

ボタンを押すと数値入力欄のvalueに値を設定し取得するサンプルです。
getElementByIdメソッドを使用します。フォーム(form)がなくても取得できます。

数値

 

コード

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

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

<script>
function clickBtn3(){

	const number2 = document.getElementById("number2");

	// 値を設定
	number2.value = "2000";
	//document.getElementById("number2").value = "2000";
	// 値を取得
	document.getElementById("span2").textContent = number2.value;
}
function clickBtn4(){
	document.getElementById("number2").value = ""; //クリア
	document.getElementById("span2").textContent = "";
}
</script>

2行目は、数値入力欄です。
9行目は、getElementByIdメソッドでID「number2」を指定して対象を特定(2行目)しています。
12行目は、valueに値を設定しています。
13行目は、12行目と同じ意味です。「document.getElementById("number2")」は、15行目でも使用するので9行目で変数にセットしています。
15行目は、value値を取得しています。

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

関連の記事

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

△上に戻る