JavaScript

この記事では「JavaScript」について、基本の意味と使い方を初心者向けにやさしく説明します。

JavaScript value property.

value

　ボタンに表示する文字列や、入力フィールドに入力されている文字列など、各エレメントの値を参照、設定します。

Syntax (構文)


document.フォームオブジェクト名.value

forms[インデックス値].各オブジェクト名.value

elements[インデックス値].value

文例


// １番目のフォームの２番目の要素の値を変数myValueに代入。
const myValue = document.forms[0][1].value;

// フォームmyForm内のテキストフィールドmyTextの値を変数myValueの値に設定。
document.myForm.myText.value = myValue;

Sample

　記入漏れをチェックする。

　フォーム内の入力値をチェックし、空欄があればページ内にまとめて表示します。

HTML source


<form name="myForm">
	<label for="value-name">お名前：</label><input type="text" id="value-name"><br>
	<label for="value-email">メール：</label><input type="email" id="value-email"><br>
	<label for="value-tel">お電話：</label><input type="tel" id="value-tel"><br>
	<input type="button" value="check" onclick="formCheck()">
</form>
<p id="formCheckResult" role="status" aria-live="polite"></p>

JavaScript source


function formCheck() {
	const messages = [];
	for (var i = 0; i < document.myForm.elements.length; i++) {
		const element = document.forms[0][i];
		if (element.type !== "button" && element.value == "") {
			messages.push((i+1) + "番目が記入漏れです");
		}
	}
	document.getElementById("formCheckResult").textContent = messages.length ? messages.join("、") : "記入漏れはありません。";
}