【JavaScript】テキストボックスから値を取得する方法 valueプロパティ

テキストボックスから値を取得する方法

テキストボックスの値を取得するには2つのステップが必要です。

1,テキストボックスの要素を取得する
2,取得したテキストボックスの要素のvalueプロパティを参照する

1,テキストボックスの要素を取得する

まず、テキストボックスから値を取得するにはテキストボックスの要素を取得しなければいけません。

最も一般的な取得方法として、getElementByIdがあります。

この方法を使うには、指定したいテキストボックスの要素にid属性を付与する必要があります。

<form>
  <input type="text" id="name">
</form>

このinput要素をJavaScriptで取得する場合は以下の通りです。

 const text = document.getElementById("name")

HTML側で指定したnameというidを、getElementByIdの引数に入れることで、その要素を指定しています。

2,取得したテキストボックスの要素のvalueプロパティを参照する

テキストボックスの要素が指定できたら、その要素のvalueプロパティを参照すると、テキストボックスの値を取得できます。

const text = document.getElementById("name")
const value = text.value

簡潔に書く方法

キストボックスの値を取得するには2つのステップが必要と伝えましたが、この作業を一文でまとめることもできます。

const textName = document.getElementById("name").value;

取得したテキストボックスの要素に続けてvalueプロパティを参照することも可能です!

タイトルとURLをコピーしました