

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

[code]

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

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


CC BY-SA 4.0
2019-02-04T07:42:09.053
52532
2019-02-04T12:30:45.090
32039
question
javascript
特定の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/>


CC BY-SA 4.0
2019-02-04T08:03:02.940
52533
2019-02-04T08:03:02.940
22665
52532
answer


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

[code]

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

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


CC BY-SA 4.0
2019-02-04T12:30:45.090
52542
2019-02-04T12:30:45.090
3475
52532
answer