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 = "新しい値";
}
上記のサンプルでは、HTML内にテキストボックスと2つのボタンを設置しています。「取得」ボタンをクリックすると、テキストボックスの値がアラートで表示されます。「設定」ボタンをクリックすると、テキストボックスの値が「新しい値」に設定されます。
リスキリングでキャリアアップしてみませんか?
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大70%のキャッシュバックを受けることができます。
最大70%の給付金が出るおすすめのプログラミングスクール!
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります!
興味のある方はすぐに確認しましょう。
この記事のまとめ
JavaScriptでHTMLフォームに含まれるテキストボックス・テキストエリアの値を取得・設定する方法を解説しました。
- テキストボックス、テキストエリアの値を取得するには、document.getElementByIdメソッドを使用する。
- 値を設定するには、valueプロパティを使用する。
テキストボックスの値を取得・設定する方法について理解できました。
コメント