Title

valメソッドを使えば、指定したセレクタのvalue属性の値を操作できる

valメソッドの概要

valメソッドを使うと、指定したセレクタのvalue属性の値を引数の値で書き換えることができます。
また、valメソッドの引数を空にしておくことでセレクタのvalue属性の値を取得することもできます。
使用上の注意点としてはvalue属性がある要素にしか使えないメソッドだということです。

jQueryではメソッドとして機能させていますが、javascriptとして考えた場合は、エレメントのvalueプロパティに引数の値を代入したり、プロパティ値を取得していることになります。

セレクタをid属性としてコードを書くと以下のようになります。

//jQuery:
$(idセレクタ).val(引数);

//javascript:
document.getElementById("id属性名").value = 引数;

実機サンプル

サンプルテキスト : id="idText" 答え : id="idAnswer" innerText .valメソッドボタンをクリックするとサンプルテキストの内容で、答えのテキストを書き換えます。

サンプルコード

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<p><input type="text" value="サンプルテキスト" id="idText"></p>
	<p id="idAnswer">innerText</p>
	<p><input type="button" value="valメソッド" id="idButton"></p>
	<script>
		$("#idAnswer").text($("#idText").val());
		$("#idButton").val("valメソッドボタンがクリックされました。");
	</script>
</body>

サンプルコードではボダンがクリックされた時の処理は、混乱を避ける為に掲載していません。
ボタンがクリックされたらscript要素の中のコードが実行されると思って下さい。

サンプルコードの要点

input要素のtext型にidTextの識別子を設定しています。
p要素にidAnswerの識別子を設定しています。
idAnswerのテキスト内容をidTextのvalue値で書き換えています。