HTMLの要素のvalue属性【現役エンジニアが解説】
今回は、HTMLの要素のvalue属性について、value属性の基本とJavaScriptでvalue属性の値を操作する方法に分け、簡単に解説していきます。
value属性の基本
inputタグ等の入力可能な要素にはvalue属性があります。
value属性には、要素に入力した値が格納され、逆に初期値を設定することもできます。
<input type="text" id="hoge" value="ほげ">
上記のコードでは、inputタグのテキストボックスに、”ほげ”という初期値を設定しています。
JavaScriptでvalue属性の値を取得する
JavaScriptで要素のvalueプロパティを参照するとvalue属性の値を取得できます。
idを設定している要素の場合には、document.getElementById(“id名”).valueで参照可能です。
var hoge = document.getElementById("hoge").value;
console.log(hoge); // "ほげ"
上記のコードでは、hogeというidを持つ要素のvalueプロパティを取得し、変数に代入してログに値を出力しています。
JavaScriptでvalue属性の値を書き換える
JavaScriptで要素のvalueプロパティに代入することでvalue属性の値を書き変えられます。
idを設定している要素の場合には、document.getElementById(“id名”).valueを左辺にして代入可能です。
document.getElementById("hoge").value = "ほげほげ";
上記のコードでは、hogeというidを持つ要素のvalueプロパティに対し、”ほげほげ”という値を代入し、書き変えています。