JavaScript ボタンタグをクリックされたときにクリックされたボタンにクラスを追加して３秒後にクラスを削除したい

Question

実現したいこと

JavaScript ボタンタグをクリックされたときにクリックされたボタンにクラスを追加したい

JavaScript ボタンタグをクリックされたときにクリックされたボタンにクラスを追加するような仕組みを作っています。

ボタンをクリックしてクラスを追加したり削除することはできました。しかし、ボタンを複数回連続してクリックすると3秒後にクラスが外れる挙動になりません。

該当のコードは以下のようなコードです

該当のコード

<button><span class="default">ボタン1</span><span class="clicked">ボタン1クリック</span></button>
<button><span class="default">ボタン2</span><span class="clicked">ボタン2クリック</span></button>
<button><span class="default">ボタン3</span><span class="clicked">ボタン3クリック</span></button>

button {
  padding: 30px;  
}

.clicked {
  display: none;
}

.button-clicked .default {
  display: none;
}

.clicked {
  display: none;
}

.button-clicked .clicked {
  display: block;
}

// ボタンの要素を取得
const buttons = document.querySelectorAll('button');

// ボタンがクリックされた時の処理を定義
function handleClick(event) {
  const button = event.currentTarget;
  // "clicked"クラスを追加
  button.classList.add('button-clicked');
  // 3秒後に"clicked"クラスを削除
  setTimeout(() => {
    button.classList.remove('button-clicked');
  }, 3000);
}

// 各ボタンに対してクリックイベントのリスナーを登録
buttons.forEach(button => {
  button.addEventListener('click', handleClick);
});

それぞれのボタンに対してボタンがクリックされたら３秒後にclickedクラスが削除されるようにしたいのですが、お心優しい方ご教授いただければと思います

Comments

[int32_t]

> ボタンを複数回連続してクリックすると3秒後にクラスが外れる挙動になりません。

最初のクリックから3秒後に外れる挙動になっていると思いますが、欲しい動作はそうではないのでしょうか。

[yambejp]

申し訳ない、前の質問に回答してしまっています。
動作が違うようなら指摘ください

[shimon11]

```HTML
<style>
.button-clicked{
color:red;
}
</style>
<script>
let tid=[];
document.addEventListener('click', e=>{
const t=e.target.closest('button');
if(t){
const idx=[...document.querySelectorAll('button')].indexOf(t);
clearTimeout(tid[idx]);
t.classList.add('button-clicked');
tid[idx]=setTimeout(()=>{
t.classList.remove('button-clicked');
},5000);
}
});
</script>
<button><span class="default">ボタン1</span><span class="clicked">ボタン1クリック</span></button>
<button><span class="default">ボタン2</span><span class="clicked">ボタン2クリック</span></button>
<button><span class="default">ボタン3</span><span class="clicked">ボタン3クリック</span></button>
```
前回の質問の回答のコードでは
クリックした時にクラス名が付きます。その後クラス名が外れた後に再びクリックをすると一度クラスが追加されますが、setTimeoutで指定した秒数より遥かに早くクラスが外れてしまいます。

[yambejp]

> その後クラス名が外れた後に再びクリックをすると一度クラスが追加されますが、setTimeoutで指定した秒数より遥かに早くクラスが外れてしまいます。

そうはならないと思いますが・・・

[shimon11]

yambejpさん
大変失礼しました。
以前のjavascriptのコードが邪魔をしていました。

各ボタンにidを振って識別する感じですね。
期待していた動作になりました！

[yambejp]

問題解決したようなのでよかったです。
この質問は自己解決で閉じておいてください

Answer 1

https://teratail.com/questions/roqc3k8fe92dbs#reply-1zr5ikx9crfubr