CSSクラスにonclick = call_locker（）イベントを添付する

Question

WPサイトでコンテンツロッカーを実装しようとしています。私は通常、ポップアップをトリガーする要素にHTMLコードonclick="call_locker()"を追加します。しかし、私はサイトを構築するために使用するプラグインのため、HTMLに直接アクセスすることはできません。私の意図は.onclickトリガしたイベントを経由して、全体.fl-buttonクラスにcall_locker()機能を添付することです

<a href="#" target="_self" class="fl-button" role="button"> 
    <span class="fl-button-text">Subscribe!</span> 
</a> 

：

これは私がcall_locker()機能を添付するボタン要素です。このようにして、私が作成した他の.fl-buttonまたはページでそれをグローバルに使用できるようになります。

これは私が思い付いたコードです：

(function() { 
    document.getElementsByClassName("fl-button").onclick = function() { 
    call_locker(); 
    }; 
})(); 

私は

:-(ボタンをクリックすると、しかし、何も私が唯一の希望することができますので、私は、Javaには専門家でない起こりません私の構文が正しいと私はあまりにもポストのために使用される用語。あなたの助けを事前に

ありがとう！

Answer 1

getElementsByClassNameはオブジェクトのような配列であるHTMLCollectionを返します。オブジェクトを反復処理して、アンカータグごとにclickイベントリスナーを追加する必要があります。

Document.getElementsByClassName()

Returns an array-like object of all child elements which have all of the given class names...

あなたは、コレクションを反復処理するためにArray.prototype.forEachを使用することができますが、あなたはそれを[].slice.call(HTMLCollection)を呼び出して実行することができ、アレイを、変換する必要があります前に。

ここは例です。