JavaScript テキストエリアの値を取得/設定するサンプル |

JavaScriptのテキストエリアの値を取得/設定するサンプルです。

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

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

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

<script>
function btn1_click(){
	// 値を設定
	document.form1.test1.value = 100;

	// 値を取得
	var str = document.form1.test1.value;
	document.getElementById("sp1").innerHTML = str; 
}
function btn2_click(){
	document.form1.test1.value = ""; //クリア
	var str = document.form1.test1.value;
	document.getElementById("sp1").innerHTML = str;
}
</script>
<p>設定した値 <span id="sp1"></span></p>
<form name="form1">
<textarea name="test1" value="1" cols="50" rows=5 maxlength="10">テスト</textarea><br/>
<input type="button" value="ボタン1" onclick="btn1_click()"/>
<input type="button" value="クリア" onclick="btn2_click()"/>
</form>

サンプル

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

設定した値

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

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

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

	// 値を取得
	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>

<textarea name="test1" value="1" id="tx1" cols="50" rows=5 maxlength="10">テスト</textarea><br/>
<input type="button" value="ボタン3" onclick="btn3_click()"/>
<input type="button" value="クリア" onclick="btn4_click()"/>

サンプル

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

設定した値

テスト