JavaScriptでテキストボックスに入力された値の取得方法と書き換え方法

PROGRAM

今回は、JavaScriptでテキストボックスに入力された値の取得方法と書き換え方法について、それぞれに分け、簡単に解説していきます。

HTMLでのテキストボックスの書き方

HTMLではinputタグを使ってテキストボックスを作ることができます。

テキストボックスの場合、inputタグのtype属性はtextにし、idやname属性も設定します。

<input type="text" id="username" value="hoge">

上記のコードでは、idがusernameのテキストボックスを作り、value属性の初期値をhogeに設定しています。

テキストボックスに入力された値の取得方法

テキストボックスの値はテキストボックスの要素のvalueプロパティで取得できます。

idを設定している場合はdocument.getElementByIdメソッドでテキストボックスの要素を特定できます。

console.log(document.getElementById("username").value);

上記のコードでは、idがusernameのテキストボックスに入力された値を取得し、ログにその値を出力しています。

テキストボックスに入力された値の書き換え方法

テキストボックスの値を書き換えるにはテキストボックスの要素のvalueプロパティに代入します。

idを設定している場合にはdocument.getElementByIdメソッドでテキストボックスの要素を取得できます。

document.getElementById("username").value = "hogehoge";

上記のコードでは、idがusernameのテキストボックスのvalueプロパティにhogehogeを代入し、値を書き換えています。