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

JavaScriptでHTMLフォームに含まれるテキストボックス・テキストエリアの値を取得・設定する方法を解説します。

テキストボックス・テキストエリアの値を取得・設定する方法を教えてください！

HTMLフォームに含まれるテキストボックス・テキストエリアの値を取得・設定する方法について解説します。

テキストボックス、テキストエリアの値を取得する方法

HTMLフォームのテキストボックス、テキストエリアの値を取得する方法は、ドキュメントオブジェクトモデル(DOM)を使用することで実現します。

DOMを使用することで、HTMLドキュメント内の要素を操作することができます。

テキストボックスの値を取得、設定するには、以下の手順を踏みます。

HTMLのテキストボックス、テキストエリアにIDを付与します。
JavaScriptで「document.getElementById」メソッドを使用して、テキストボックス、テキストエリアを取得します。
取得したテキストボックスのvalueプロパティを使用して、テキストボックス、テキストエリアの値を取得、設定します。

テキストボックスの値を取得、設定するサンプル

以下のサンプルでは、テキストボックスの値を取得、設定しています。

<input type="text" id="textbox">
<button onclick="getValue()">取得</button>
<button onclick="setValue()">設定</button>

function getValue() {
  var textbox = document.getElementById("textbox");
  alert(textbox.value);
}

function setValue() {
  var textbox = document.getElementById("textbox");
  textbox.value = "新しい値";
}

　上記のサンプルでは、HTML内にテキストボックスと2つのボタンを設置しています。「取得」ボタンをクリックすると、テキストボックスの値がアラートで表示されます。「設定」ボタンをクリックすると、テキストボックスの値が「新しい値」に設定されます。

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

以下のサンプルでは、テキストエリアの値を取得、設定しています。

<textarea id="textarea"></textarea>
<button onclick="getValue()">取得</button>
<button onclick="setValue()">設定</button>

function getValue() {
  var textarea = document.getElementById("textarea");
  alert(textarea.value);
}

function setValue() {
  var textarea = document.getElementById("textarea");
  textarea.value = "新しい値";
}

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。