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;