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

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

コード

以下の4つのサンプルがあります。

No 説明
値を設定
9行目は、フォームのname「form1」とテキストエリアのname「test1」で対象を特定(28行目)しvalueに値を設定しています。
値を取得
12行目は、フォームのname「form1」とテキストエリアのname「test1」で対象を特定(28行目)しvalueの値を取得しています。
値を設定
17行目は、getElementByIdメソッドでID「tx1」を指定して対象を特定(28行目)しvalueに値を設定しています。
値を取得
20行目は、getElementByIdメソッドでID「tx1」を指定して対象を特定(28行目)しvalueの値を取得しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テキストエリアのサンプル</title>
<script>
function btn1_click(){
	// No.1 値を設定
	document.form1.test1.value = 100;

	// No.2 値を取得
	var str = document.form1.test1.value;
	document.getElementById("sp1").innerHTML = str; 
}
function btn2_click(){
	// No.3 getElementByIdメソッドで値を設定
	document.getElementById("tx1").value = 200;

	// No.4 getElementByIdメソッドで値を取得
	var str =  document.getElementById("tx1").value;
	document.getElementById("sp1").innerHTML = str; 
}
</script>
</head>
<body >
<p>設定した値 <span id="sp1"></span></p>
<form name="form1">
<textarea name="test1" value="1" id="tx1" cols="50" rows=5 maxlength="10">テスト</textarea><br/>
<input type="button" value="ボタン1" onclick="btn1_click()"/><br/>
<input type="button" value="ボタン2" onclick="btn2_click()"/><br/>
</form>
</body>
</html>

サンプル

上記コードのサンプルです。
ボタン1を押すと、テキストエリアに値(100)をセットして表示します。
ボタン2を押すと、テキストエリアに値(200)をセットして表示します

設定した値



関連の記事

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




△上に戻る