【JavaScript】inputのvalueを変更する方法

Contents

1 【JavaScript】inputのvalueを変更する方法

【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()">

ボタンを押下すると先ほどと同様の結果が得られます。