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

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

確認環境
・Windows10
・Google Chrome/IE11

テキストボックスの値を取得する(フォームとname)
テキストボックスに値を設定する(フォームとname)
テキストボックスの値を取得する(getElementByIdメソッド)
テキストボックスに値を設定する(getElementByIdメソッド)

テキストボックスの値を取得する(フォームとname)

ボタンを押すとテキストボックスの値を取得するサンプルです。
フォームとnameを使用するやり方です。

取得した値

コード

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

<p>取得した値 <span id="span1"></span></p>
<form name="form1">
	<input type="text" name="text1" value="red" maxlength="5">
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()">
<input type="button" value="クリア" onclick="clickBtn2()">

<script>
function clickBtn1(){
	// 値を取得
	const t1 = document.form1.text1.value;
	document.getElementById("span1").textContent = t1;
}
function clickBtn2(){
	document.getElementById("span1").textContent = "";
}
</script>

3行目は、テキストボックスです。
5行目のボタンをクリックすると9行目の関数が実行されます。
11行目は、2行目のフォームのname「form1」と3行目のテキストボックスのname「text1」で対象を特定(3行目)し、そのvalueから値を取得し変数「t1」に代入します。
12行目は、変数「t1」の値を1行目に文字として表示しています。
14～16行目は、テキストのエリアに空文字「""」をセットしてクリアしています。

テキストボックスに値を設定する(フォームとname)

ボタンを押すとテキストボックスに値を設定するサンプルです。
フォームとnameを使用するやり方です。

コード

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

<form name="form2">
	<input type="text" name="text2" value="red" maxlength="5">
</form>
<input type="button" value="ボタン1" onclick="clickBtn3()">
<input type="button" value="クリア" onclick="clickBtn4()">

<script>
function clickBtn3(){
	// 値を設定
	document.form2.text2.value = "blue";
}
function clickBtn4(){
	document.form2.text2.value = ""; //クリア
}
</script>

2行目は、テキストボックスです。
4行目のボタンをクリックすると8行目の関数が実行されます。
10行目は、1行目のフォームのname「form1」と2行目のテキストボックスのname「text2」で対象を特定(2行目)し、そのvalueの値に"blue"を代入しています。
12～14行目は、テキストボックスのvalueに空文字「""」をセットしてクリアしています。

テキストボックスの値を取得する(getElementByIdメソッド)

ボタンを押すとテキストボックスの値を取得するサンプルです。
getElementByIdメソッドを使用するやり方です。フォーム(form)がなくても取得できます。

取得した値

コード

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

<p>取得した値 <span id="span3"></span></p>
<input type="text" value="red" id="text3" maxlength="5">
<input type="button" value="ボタン" onclick="clickBtn5()">
<input type="button" value="クリア" onclick="clickBtn6()">

<script>
function clickBtn5(){
	// 値を取得
	const t3 = document.getElementById("text3").value;
	document.getElementById("span3").textContent = t3;
}
function clickBtn6(){
	document.getElementById("span3").textContent = "";
}
</script>

2行目は、テキストボックスです。
3行目のボタンをクリックすると7行目の関数が実行されます。
9行目は、getElementByIdメソッドで2行目のID「text3」を指定して対象を特定(2行目)し、そのvalueから値を取得し変数「t3」に代入します。
10行目は、変数「t3」の値を1行目のテキストのエリアに表示します。
12～14行目は、テキストのエリアに空文字「""」をセットしてクリアしています。

テキストボックスに値を設定する(getElementByIdメソッド)

ボタンを押すとテキストボックスに値を設定するサンプルです。
getElementByIdメソッドを使用するやり方です。フォーム(form)がなくても取得できます。

コード

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

<input type="text" value="red" id="text4" maxlength="5">
<input type="button" value="ボタン" onclick="clickBtn7()">
<input type="button" value="クリア" onclick="clickBtn8()">

<script>
function clickBtn7(){
	// 値を取得
	document.getElementById("text4").value = "blue";
}
function clickBtn8(){
	document.getElementById("text4").value = "";
}
</script>

1行目は、テキストボックスです。
2行目のボタンをクリックすると6行目の関数が実行されます。
8行目は、1行目のテキストボックスのname「text4」で対象を特定(1行目)し、そのvalueの値に"blue"を代入しています。
10～12行目は、テキストボックスのvalueに空文字「""」をセットしてクリアしています。