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

行動規範の内容に同意します

回答2件

ベストアンサー

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

総合スコア21882

shimon11

2023/03/22 06:10

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

int32_t

2023/03/22 06:15

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

shimon11

2023/03/22 06:22

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

行動規範の内容に同意します

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>