2

初めて質問いたします。
外部リンクのjsを使って、特定のclassを持つ要素がクリックされた時に適用されるアクションを作りたいと思っています。

document.getElementsByClassName('hoge-btn').onclick = function() {
  window.alert('アラートの表示');
};

このようなコードを書いてみましたが、「hoge-btn」というclassの要素をクリックしても動作しません。
何か間違っているでしょうか…。
お知恵を貸していただければ幸いです。

2 件の回答 2

3

getElementsByClassNameが返すのは単独の要素ではなくHTMLCollectionで返します。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

クリックする対象を指定する必要がありますので、
getElementsByClassName("hoge-btn")[0]などと要素を指定するか
もしくは

var elements = document.getElementsByClassName('hoge-btn');
Array.prototype.forEach.call(elements, function(item) {
  // itemを利用した処理
  item.onclick = function() {
    window.alert('アラートの表示');
  };
}

などとして全要素に対してイベントを設定したりする必要があります。

<参考URL>
https://hacknote.jp/archives/21892/

1
  • 丁寧にご説明くださりありがとうございました。 参照リンクもありがとうございました。 .onclick = function()は単独の要素にしか適用できないということでしょうか。 基本的なことも分かっておらず申し訳ありません。 初心者のためわからないことだらけですが、教えていただいたコードを丁寧に勉強させていただきます。 ありがとうございました。
    – beginner70
    Commented 2019年2月5日 0:36
1

対象の要素が増減する場合はいちいちイベントリスナを登録するのは手間ですので、documentでイベント処理してしまうのも手です。click イベントはstopPropagation()しない限りは先祖ノードすべてのイベントリスナを起動します。

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('hoge-btn')) {
    alert('アラートの表示');
  }
}, false);

このコードはドキュメント内にhoge-btnクラスを持つ要素が1つもないタイミングで実行しても、あとから追加したhoge-btn付きの要素のクリックを処理することができます。

1
  • ご回答ありがとうございます。 初めて聞くことばかりで為になりました。 参考にさせていただきます!本当にありがとうございました。
    – beginner70
    Commented 2019年2月5日 0:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。