質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

318閲覧

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

shimon11

総合スコア49

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/03/22 06:36

実現したいこと

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});

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

自己解決

投稿2023/03/22 10:56

shimon11

総合スコア49

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問