クリックされたボタンにクラスを追加(HTML側にonclick使用)

Question

３つのボタンがあり、クリックされたボタンにはアニメーション用のクラスを追加したいです。
追加するクラス名はすべて同じです。

html側にonclickで設定しています。
onclickでの方法がなかなか検索ヒットせず、解決法が分かりません。
今のままではボタンAをクリックしてもすべての要素にクラスが追加されます。

　　　　　<span class="btn">
            <button class="stamp" type="submit" name="stamp" value="A" onclick="myfunc(1);">
              <div>A</div>
            </button>
          </span>
　　　　　<span class="btn">
            <button class="stamp" type="submit" name="stamp" value="B" onclick="myfunc(2);">
              <div>B</div>
            </button>
          </span>
　　　　　<span class="btn">
            <button class="stamp" type="submit" name="stamp" value="C" onclick="myfunc(3);">
              <div>C</div>
            </button>
          </span>

      function myfunc(){
        var stamp = document.getElementsByClassName('stamp');
        for (var i = 0; i < stamp.length; i++) {
            stamp[i].classList.add('is-animation');
        };
      };

Answer 1

addEventListener() のほうが HTML を変更せずに済むのでいいのではないかと思いますが、とりあえず onclick 属性を使うとするなら event を渡すようにします。

<button class="stamp" type="submit" name="stamp" value="A" onclick="myfunc(event);">

currentTarget プロパティに対象となるボタンがあります。

      function myfunc(event) {
        event.currentTarget.classList.add('is-animation');
      }

https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

Comments

[nana_ton]

addEventListener() の方が良いのですね、、
その辺調べてみます。
ありがとうございます！

Answer 2

1番からの連番で指示するならこうです

function myfunc(num){
  var stamp = document.getElementsByClassName('stamp');
  stamp[num-1].classList.add('is-animation');
}

Comments

[yambejp]

あまり汎用性が高くないのに加えて、submitになにか処理しても
formが遷移してしまうのであまり実用的ではないと思います

[yambejp]

他の方も指摘していますがhtmlからjsを切り離すためには
addEventListenerへの移行を検討ください

[nana_ton]

そうなんですね、、
私の知識ではよく分からないのでバックサイド側に確認しておきます！
ありがとうございます！

Answer 3

このような形でいかがでしょうか?

• onclick="myfunc(1);"などの指定がありましたが、関数側で引数が用意されていなかったので用意しました
• value属性が固有だったので、querySelectorAllで取得するようにしました。
• for文を無くす書き方もできるとは思いますが、そのまま残しています。

<span class="btn">
    <button class="stamp" type="submit" name="stamp" value="A" onclick="myfunc('A');">
        <div>A</div>
    </button>
</span>
<span class="btn">
    <button class="stamp" type="submit" name="stamp" value="B" onclick="myfunc('B');">
        <div>B</div>
    </button>
</span>
<span class="btn">
    <button class="stamp" type="submit" name="stamp" value="C" onclick="myfunc('C');">
        <div>C</div>
    </button>
</span>

function myfunc(btnValue) {
    var stamp = document.querySelectorAll("[value='" + btnValue + "']");
    for (var i = 0; i < stamp.length; i++) {
        stamp[i].classList.add('is-animation');
    }
}

JavaScript的にもっと正しい方法はありそうですが、とりいそぎ..

Comments

[nana_ton]

ありがとうございます！
こちらの方法で動きました！
あまり知識ないので引数の書き方なども勉強になりました。

Answer 4

thisを引数として渡してはいかがでしょうか。

　　　　　<span class="btn">
            <button class="stamp" type="submit" name="stamp" value="A" onclick="myfunc(this);">
              <div>A</div>
            </button>
          </span>
　　　　　<span class="btn">
            <button class="stamp" type="submit" name="stamp" value="B" onclick="myfunc(this);">
              <div>B</div>
            </button>
          </span>
　　　　　<span class="btn">
            <button class="stamp" type="submit" name="stamp" value="C" onclick="myfunc(this);">
              <div>C</div>
            </button>
          </span>

      function myfunc(a){
        a.classList.add('is-animation');
      }

：追記
コメントで書いた内容を追記します。
myfunc(0)のように引数を数値で渡したい場合は以下の通りです。

function myfunc(a){
   var stamp = document.getElementsByClassName('stamp');
   stamp[a].classList.add('is-animation');
};

Comments

[nana_ton]

ありがとうございます！
どのボタンか分かるように引数をmyfunc(0)のように番号付けてほしいという
バックエンジニア要望があったのですが、
そこはどうにもならないですかね。。

[kokemomo.sour]

意図にあっているか自信ないのですが、
引数をそのまま配列の添字にする、だといかがでしょう。。
```
function myfunc(a){
var stamp = document.getElementsByClassName('stamp');
stamp[a].classList.add('is-animation');

};
```

[nana_ton]

あってます！教えていただいた方法でいけました！
ありがとうございます！！

[kokemomo.sour]

よかったです！