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

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

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

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

Q&A

解決済

2回答

414閲覧

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

shimon11

総合スコア49

JavaScript

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

0グッド

0クリップ

投稿2023/03/22 05:52

実現したいこと

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

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

buttonタグのpadding箇所をクリックすれば理想的な動きをしていますが、spanタグや文字のあたりをクリックしてもクリックイベントが反応しません。

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

該当のコード

HTML

1<button><span class="default">ボタン1</span><span class="clicked">ボタン1クリック</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.target; 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});

spanのテキストをクリックしても動くようなコードにするためにはどのようにすれば良いでしょうか。
お心優しい方ご教授いただければと思います

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

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

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

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

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

guest

回答2

0

ベストアンサー

js

1 const button = event.target;

<span>内をクリックすると event.target はその <span> になります。<button> を処理したい場合は以下のようにします。

js

1 const button = event.currentTarget;

または

js

1 const button = event.target.closest('button');

投稿2023/03/22 05:57

int32_t

総合スコア21207

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

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

shimon11

2023/03/22 06:10

ありがとうございます! 理想的な動きになりました ただ、これは別の問題だと思うのですが、ボタンを複数回連続してクリックすると3秒後にクラスが外れる挙動になりません。 可能でしたら教えていただけませんでしょうか。
int32_t

2023/03/22 06:15

> ただ、これは別の問題だと思うのですが はい、別の問題と思いますので、この質問は終わりにして別の質問を作ってください。
shimon11

2023/03/22 06:22

わかりました。 ありがとうございます
guest

0

javascript

1<style> 2.button-clicked{ 3color:red; 4} 5</style> 6<script> 7let tid=[]; 8document.addEventListener('click', e=>{ 9 const t=e.target.closest('button'); 10 if(t){ 11 const idx=[...document.querySelectorAll('button')].indexOf(t); 12 clearTimeout(tid[idx]); 13 t.classList.add('button-clicked'); 14 tid[idx]=setTimeout(()=>{ 15 t.classList.remove('button-clicked'); 16 },1000); 17 } 18}); 19</script> 20<button><span class="default">ボタン1</span><span class="clicked">ボタン1クリック</span></button> 21<button><span class="default">ボタン2</span><span class="clicked">ボタン2クリック</span></button> 22<button><span class="default">ボタン3</span><span class="clicked">ボタン3クリック</span></button>

投稿2023/03/22 06:25

yambejp

総合スコア115275

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問