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

実現したいこと

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

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

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

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

該当のコード

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

CSS
1button {
2  padding: 30px;  
3}
4
5.clicked {
6  display: none;
7}
8
9.button-clicked .default {
10  display: none;
11}
12
13.clicked {
14  display: none;
15}
16
17.button-clicked .clicked {
18  display: block;
19}

JavaScript
1// ボタンの要素を取得
2const buttons = document.querySelectorAll('button');
3
4// ボタンがクリックされた時の処理を定義
5function handleClick(event) {
6  const button = event.currentTarget;
7  // "clicked"クラスを追加
8  button.classList.add('button-clicked');
9  // 3秒後に"clicked"クラスを削除
10  setTimeout(() => {
11    button.classList.remove('button-clicked');
12  }, 3000);
13}
14
15// 各ボタンに対してクリックイベントのリスナーを登録
16buttons.forEach(button => {
17  button.addEventListener('click', handleClick);
18});

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

int32_t

2023/03/22 06:41

> ボタンを複数回連続してクリックすると3秒後にクラスが外れる挙動になりません。最初のクリックから3秒後に外れる挙動になっていると思いますが、欲しい動作はそうではないのでしょうか。

yambejp

2023/03/22 06:43

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

shimon11

2023/03/22 06:49

```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

2023/03/22 07:13

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

shimon11

2023/03/22 08:17

yambejpさん大変失礼しました。以前のjavascriptのコードが邪魔をしていました。各ボタンにidを振って識別する感じですね。期待していた動作になりました！

yambejp

2023/03/22 08:21

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