JavaScriptでinput属性内のテキストボックスに情報を格納する方法

JavaScriptでフォームのvalueプロパティに要素を挿入したい

JavaScriptでフォームを扱う際、主にページ読み込み時にフォーム関連の属性のvalueプロパティにデータを挿入したいことがあります。

主に、ユーザーから何らかの申込を受け付けるページで、特定の要素が未入力のためにエラーを返す時に、その他の適切な入力値を保持しておくことでユーザーの再入力の手間を省くために利用されます。

プロパティ

プロパティ意味
インプット要素.value = [代入テキスト][代入テキスト]をインプット要素のvalueプロパティに挿入する文字列
input要素に文字列を挿入するための仕様

サンプルコード

ボタンを押したら「Default Text」という文字列がテキスト欄に記入されるサンプルコードを紹介します。

フォーム内の要素を適当に書き換えた後にボタンを押して挙動を確認してください。

Output
Pug
#targetArea
		button#resetButton.rounded.py-1.px-3.brandia_btn.mb-2 Reset
		form.form-group
			input#targetText.form-control(type="text" value="Default Text")
JavaScript
const targetText = document.getElementById( 'targetText' );
const resetButton = document.getElementById( 'resetButton' );
resetButton.addEventListener('click', function() {
	targetText.value = 'Default Text';		
});
インストラクター