Contents
【JavaScript】inputのvalueを変更する方法
document.getElementByIdで取得したinput要素のvalueを変更
htmlのinput要素にidを仕込み、document.getElementByIdでidを取得してvalueの値を変更することができます。
// document.getElementByIdで値を変更 let 変数名 = document.getElementById('idの値'); 変数名.value = "置き換える値";
document.getElementByIdはid値に一致する要素を取得することができます。
取得した要素のvalue値を置き換えることでhtmlで出力される要素を置き換えます。
<script> function mojiokikae() { let ボタン要素 = document.getElementById('test'); ボタン要素.value = "押して変わった"; } </script> <input id = "test" type="button" value="押すと変わる" onclick="mojiokikae()">
上記のボタンを押下するとvalue値「押すと変わる」から「押して変わった」に変更されることが確認できます。
document.querySelectorで取得したinput要素のvalueを変更
htmlのinput要素にclassを仕込み、document.querySelectorでセレクターを取得してvalueの値を変更することができます。
// document.querySelectorで値を変更 let 変数名 = document.querySelector('.セレクター名'); 変数名.value = "置き換える値";
document.querySelectorでセレクタ名に一致する要素を取得します。
取得した要素のvalue値を置き換えることでhtmlで出力される要素を置き換えます。
<script> function mojiokikae() { let ボタン要素 = document.querySelector('.test'); ボタン要素.value = "押して変わった" } </script> <input class = "test" type="button" value="押すと変わる" onclick="mojiokikae()">
ボタンを押下すると先ほどと同じ結果が得られます。
document.getElementsByClassNameで取得したinput要素のvalueを変更
htmlのinput要素にclassを仕込み、document.getElementsByClassNameでクラスを取得してvalueの値を変更することができます。
// document.getElementsByClassNameで値を変更 let 変数名 = document.getElementsByClassName('クラス名'); 変数名[0].value = "置き換える値";
document.getElementsByClassNameは要素の配列を取得します。そのため、要素にアクセスするときは、
変数名[0].value
など配列の順番を指定して置き換える必要があります。
<script> function mojiokikae() { let ボタン要素 = document.getElementsByClassName('test'); ボタン要素[0].value = "押して変わった" } </script> <input class = "test" type="button" value="押すと変わる" onclick="mojiokikae()">
ボタンを押下すると先ほどと同様の結果が得られます。
コメントを残す