JavaScript: テキストボックス・テキストエリアの値を取得・設定する

JavaScriptでテキストボックスやテキストエリア (textarea)の値を取得・設定する場合は、 「value」プロパティを使用します。

テキストボックスの値を取得する

値を取得する場合は、まずgetElementById()で要素を取得し、 valueプロパティで値を取得します。テキストエリア(textarea)でも同じです。

次のサンプルコードでは「id=age」のテキストボックスの値を取得しています。

HTML
<label>年齢: <input type="text" id="age"></label>
JavaScript
age = document.getElementById("age");

console.log(age.value);

テキストボックスに値を設定する

値を設定する場合も、まずgetElementById()で要素を取得し、 valueプロパティに対して値を設定します。 テキストエリア(textarea)でも同じです。

次のサンプルコードでは「id=age」のテキストボックスに値を設定しています。

HTML
<label>年齢: <input type="text" id="age"></label>
JavaScript
age = document.getElementById("age");

age.value = 30;
JavaScript入門