【JavaScript】valueプロパティで値を参照する

HTMLで書かれた form の内容をJavaScriptで取得する value プロパティについて。

今回はテキストボックスで書いてみます。

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

テキストボックスの値を取得する手順は2つ。

  1. テキストボックスの要素をJavaScriptで指定する
  2. 指定したテキストボックスの要素のvalueプロパティを参照する

ということで早速書いていきましょう。

まずはHTMLです。

<input type="text" id="hogeText">

↑のHTMLをJavaScriptのgetElementByIdで取得して変数に代入します。

let textBox = document.getElementById("hogeText");

↑で代入したテキストボックスの値をvalueプロパティで取得します。

let textValue = textBox.value;

これで、変数 textValue に テキストボックスの値が代入されました。