JavaScript テキストボックスの値を取得/設定するサンプル |

JavaScriptのテキストボックスの値を取得/設定するサンプルです。

formの名称を指定して値を取得/設定する
getElementByIdメソッドを使用して値を取得/設定する

formの名称を指定して値を取得/設定する

formの名称を指定して値を取得/設定するサンプルです。
4行目は、フォームのname「form1」とテキストボックスのname「color1」で対象を特定(18行目)しvalueに値を設定しています。
7行目は、フォームのname「form1」とテキストボックスのname「color1」で対象を特定(18行目)しvalue値を取得しています。

<script>
function btn1_click(){
	// 値を設定
	document.form1.color1.value = "blue";

	// 値を取得
	var str = document.form1.color1.value;
	document.getElementById("sp1").innerHTML = str;
}
function btn2_click(){
	document.form1.color1.value = ""; //クリア
	var str = document.form1.color1.value;
	document.getElementById("sp1").innerHTML = str;
}
</script>
<p>色 <span id="sp1"></span></p>
<form name="form1">
<input type="text" name="color1" value="red" maxlength="5">
</form>
<input type="button" value="ボタン1" onclick="btn1_click()">
<input type="button" value="クリア" onclick="btn2_click()">

サンプル

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

色

getElementByIdメソッドを使用して値を取得/設定する

getElementByIdメソッドを使用して値を取得/設定するサンプルです。
4行目は、getElementByIdメソッドでID「tx1」を指定して対象を特定(18行目)しvalueに値を設定しています。
7行目は、getElementByIdメソッドでID「tx1」を指定して対象を特定(18行目)しvalue値を取得しています。

<script>
function btn3_click(){
	// 値を設定
	document.getElementById("tx1").value = "green";

	// 値を取得
	var str = document.getElementById("tx1").value;
	document.getElementById("sp2").innerHTML = str;
}
function btn4_click(){
	document.getElementById("tx1").value = ""; //クリア
	var str = document.getElementById("tx1").value;
	document.getElementById("sp2").innerHTML = str;
}
</script>
<p>色 <span id="sp2"></span></p>

<input type="text" name="color1" value="red" id="tx1" maxlength="5">
<br />
<input type="button" value="ボタン2" onclick="btn3_click()">
<input type="button" value="クリア" onclick="btn4_click()">

サンプル

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

色