特定のclassを持つ要素がクリックされた時に適用されるアクション


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

[code]

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

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




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

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

[code]

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

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

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

