クリックするとボタンの背景色が変わり、数秒後に、元の色に戻るコードの実装

Question

クリックするとボタンの背景色が変わるコードを
Javascriptで実装しました。

ここから、
例えば「2秒後に元の背景色に戻す」には、
どうすればよいでしょうか？

元の背景色は、変数ではなく、指定しても大丈夫です。

settimeoutを使用するのでしょうが、
具体的に分かりません。

よろしくお願い致します。

<input type="submit" id="click-to-copy" class="btn" value="コピーする" style="background-color:#f5f5f5;>

document.getElementById('click-to-copy').addEventListener('click',
function () {
this.style.backgroundColor = "#ff0000";
}
)

Answer 1

色をもとに戻す関数を書いておいて、settimeoutを使ってその数秒後にその関数を呼ぶようにしてみればいいかと

JavaScriptでsetTimeoutを使う方法【初心者向け】現役エンジニアが解説 | TechAcademyマガジン

Comments

[退会済みユーザー]

お教えいただきありがとうございました。
またリンク先もありがとうございます。
参考にいたします。

Answer 2

submitの場合たいていformによるページの遷移が発生するため
色を変える前に別のページに移動してしまいます

sample

<style>
.btn{
background-color:#f5f5f5;
}
.btn.clicked{
background-color:#ff0000;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.btn').forEach(x=>{
    x.addEventListener('click',()=>{
      x.classList.add('clicked');
      setTimeout(()=>x.classList.remove('clicked'),1000);
    });
  });
});
</script>
<input type="button" class="btn" value="1">
<input type="button" class="btn" value="2">
<input type="button" class="btn" value="3">

Comments

[退会済みユーザー]

お教え頂きありがとうございます。

classを付与するやり方はなるほどと思いました。
この方法ならcssで色を指定できるので助かりました。
お陰様で実装できました。ありがとうございました。

submitは必要ではありませんでしのたで、
buttonにしました。