【JavaScript】テキストボックスの値を取得しよう

【JavaScript】テキストボックスの値を取得しよう

テキストボックスに入力された値を使って何らかの計算を行いたいというときがありますよね。

そのようなとき、JavaScriptでgetElementByIDまたはgetElementsByNameを使って、テキストボックスの値を取得する方法を紹介します。

スポンサーリンク

JavaScriptでテキストボックスの値を取得

MochoによるPixabayからの画像

JavaScriptでgetElementByIDまたはgetElementsByNameを使って、テキストボックスの値を取得することができます。

getElementByIDで取得するやり方

getElementByID()を使うと、テキストボックスのID名から入力された値を取得することができます。まずはHTMLでテキストボックスと、取得した値を出力させるスペースを作ります。

JavaScriptには次のように記述します。

実際に文字や数字を入力してみましょう。

出力

取得も出力もうまくいったと思います。

getElementsByNameで取得するやり方

getElementsByName()を使うと、テキストボックスのname名を指定して値を取得することができます。次のようにHTMLで<input>にnameを指定します。

JavaScriptには次のように記述します。getElementByIdとちょっと書き方が違うので注意してください。([0]を.valueの前に入れてます)

実際に文字や数字を入力してみましょう。

出力

取得も出力もうまくいったと思います。

スポンサーリンク

テキストボックスの値を数字として取得するには?

上のやり方だとテキストボックスで取得した値は文字列扱いになります。そのため、

下のフォームに半角数字を入力しても、文字列の右に2が並ぶだけになります。

サンプル

出力

値を取得するときにparseFloat()を書き加えると、数値として処理されます。

サンプル

出力

2を足した結果が出力されましたね。

まとめ

テキストボックスの値は、

getElementByID(‘ID名’).value

または

getElementByName(‘Name名’)[0].value

で取得することができました。

このまま変数に代入しても文字列扱いになるので、数字として処理したい場合はparseFloat()を書き加えます。

IT・プログラミングカテゴリの最新記事