zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript テキストボックスの値を取得・設定する方法

JavaScriptでテキストボックスの値を取得・設定する方法を紹介します。

要素を取得

JavaScriptでテキストボックスの要素を取得するために、以下のようにテキストボックスにidを付与します。

テキストボックスに限らず、htmlの要素にアクセスする手段はいろいろありますが、idを使ってアクセスするのが一番シンプルですので、ここでidを指定します。

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

idを使って、対象のテキストボックスを取得します。

document.getElementById('取得したい要素のid')で、要素を取得できます。

const txt1 = document.getElementById('txt1');

テキストボックスの値を取得・設定

input type="text"のテキストボックスの入力値はvalue属性に設定されます。

取得した要素の属性を操作すれば、テキストボックスの値を取得・設定できます。

要素の属性を操作するには要素.属性の形でアクセスできます。

値の設定
const txt1 = document.getElementById('txt1');

// テキストボックスに「あいうえお」を設定
txt1.value = 'あいうえお';

// 以下でも可能
document.getElementById('txt1').value = 'あいうえお';
値の取得
const txt1 = document.getElementById('txt1');

// テキストボックスの値を取得
const value = txt1.value;

// 以下でも可能
const value = document.getElementById('txt1').value;


関連記事