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

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

確認環境
・Windows10
・Google Chrome/IE11

フォームとnameでvalue値を取得/設定する
getElementByIdメソッドでvalue値を取得/設定する

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

ボタンを押すとテキストエリアのvalueに値を設定し取得するサンプルです。
フォーム(form)とテキストボックスのnameを使用します。

設定した値

コード

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

<p>設定した値 <span id="span1"></span></p>
<form name="form1">
<textarea name="textarea1" value="1" cols="50" rows=5 maxlength="10">テスト</textarea>
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()"/>
<input type="button" value="クリア" onclick="clickBtn2()"/>

<script>
function clickBtn1(){

	const textarea1 = document.form1.textarea1;

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

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

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

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

設定した値

テスト

コード

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

<p>設定した値 <span id="span2"></span></p>
<textarea value="1" id="textarea2" cols="50" rows=5 maxlength="10">テスト</textarea>
<input type="button" value="ボタン3" onclick="clickBtn3()"/>
<input type="button" value="クリア" onclick="clickBtn4()"/>

<script>
function clickBtn3(){

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

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

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