Attaching onclick=call_locker() event to a CSS class

Question

I am trying to implement a content locker on my WP site. I would usually add the HTML code onclick="call_locker()" on the element that triggers the pop up. However, I do not have direct access to the HTML due to the plugin that I use for building the site.

This is the button element I want to attach the call_locker() function to:

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

My intention is to attach the call_locker() function to the whole .fl-button class via a .onclick triggered event. This way I will be able to use it globally on any other .fl-button or page that I create.

This is the code I came up with:

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

However, nothing happens when I click on the button :-(

I am no expert on java so I can only hope my syntax is correct and the terms I used for the post too.

Thanks in advance for your help!

you don't have to be a java expert to write good JS (they are different langs)... Look into jQuery's delegated events, or find a tut on manual delegation patterns. In short, you bind to the root and pass a css selector that then filters raised events, dispatching them to the specific tags as-needed. — dandavis, Jan 08 '17 at 17:55
getElementsByClassName returns several html objects that you must iterate over and assign an event listener to — Blauharley, Jan 08 '17 at 17:57
Simpler: `document.querySelector("a.fl-button").onclick=call_locker;` — mplungjan, Jan 08 '17 at 17:58
None of them worked. With the first solution I get a **TypeError: document.getElementsByClassName(...)[0] is undefined**. There is just one element of such class on the page. @Pranav C Balan — Pablo González, Jan 09 '17 at 20:54
With the second solution I get a **document.querySelector(...) is null** error. Besides, if I change the part `= function() {call_locker(); }` to `= call_locker();`, as you suggest the function is called directly as the page loads, disregarding any onclick condition. I am wondering if, given those errors, it is possible that this code is somehow being loaded before any element in the page is rendered. Can that be possible? @mplungjan — Pablo González, Jan 09 '17 at 20:56
I did not have () on my call - look again `document.querySelector("a.fl-button").onclick=call_locker;` — mplungjan, Jan 09 '17 at 20:58
@PabloGonzález : move your code to end of the page.... and make sure that the element is loaded when script is executing.. — Pranav C Balan, Jan 10 '17 at 04:06

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

getElementsByClassName returns an HTMLCollection, wich is an array like object. You need to iterate over the object and add your click event listener for each anchor tag.

Document.getElementsByClassName()

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

You can use Array.prototype.forEach to iterate over the collection, but before you have to convert it an array, which can be done by calling [].slice.call(HTMLCollection).

Here is an example.

var flBtns = document.getElementsByClassName("fl-button");

[].slice.call(flBtns).forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    console.log(e.target);
    // call your locker function here.
    //call_locker()
  })
})

<a href="#" class="fl-button">FL Button 1</a>
<a href="#" class="fl-button">FL Button 2</a>
<a href="#" class="fl-button">FL Button 3</a>
<a href="#" class="fl-button">FL Button 4</a>

Attaching onclick=call_locker() event to a CSS class

1 Answers1