Streaming live at 10am (PST)

Add onClick attribute to any element with this JS snippet


#1

Hello everyone!

I saw that allot of people, including me, missed the option to add the onClick attribute to elements, mostly for analytics purposes.
So I've written a short JavaScript snippet that you can paste in the head tag of your project.
This JavaScript snippet essentially renames the onClick attribute to 'whenClicked' (you're invited to propose a better name lol).
So you can add a custom attribute to any element on your page, name it 'whenClicked' and use it it just like you would use 'onClick'.

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('*');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                code = this.getAttribute('whenClicked');
                eval(code);   
            }
        }
    }
</script>

To add attributes to elements you do the following:

  • Choose an element
  • Go to the element's settings tab
  • Close to the bottom, you'll find the Custom Attributes section
  • Add the 'whenClicked' attribute, while being careful to spell the 'whenClicked' correctly, and input your desired code to the value - will it be analytics code or your custom code.

I hope this post will be of help :smile:


And to the Webflow staff, who will probably be reading this,
I love you guys!
And I know that this feature was once available, and that you took it down due to security threats.
But people need this feature!
Bring it back please :heart:


Onclick event - Reserved message
#2

Hi benavnon.

Thanks for your code. This is what I've been looking for.

When I test your code with a simple function that changes background color, it works perfectly. But it somehow does not work for the Google Analytics functions such whenClicked="ga('send', 'pageview', 'vpv/viewers');"

Do you have any idea?


#3

Simple onClick replacement snippet. This method works by using the ID of the element (links, buttons, div’s, etc.).

First example below stops a video by removing the content of a div and then replaces it again.
Second example will hide or show a element. Both scripts can be modified to use ClassName.


script
var BTN_1 = document.getElementById('BTN_ID-1');
var BTN_2 = document.getElementById('BTN_ID-2');

//Do Something
function MyFunction_1() {
	document.getElementById('ELEMENT_ID').innerHTML=''; //Removes the div
	document.getElementById('ELEMENT_ID').innerHTML='{iframe code here}'; //Puts the content back
}

//Do Something
function MyFunction_2() {
	//document.getElementById('ELEMENT_ID').innerHTML=''; //Removes the div
	//document.getElementById('ELEMENT_ID').innerHTML='{iframe code here}'; //Puts the content back
}

BTN_1.onclick = MyFunction_1; //Start action on click
BTN_2.onclick = MyFunction_2; //Start action on click
/script


script
var BTN_1 = document.getElementById('BTN_ID-1');
var BTN_2 = document.getElementById('BTN_ID-2');

//Just hide element
function JustHide(){
	document.getElementById('ELEMENT_ID').style.display = "none"; 
	}

//Just show element
function JustShow(){ 
	document.getElementById('ELEMENT_ID').style.display = ""; 
	} 

BTN_1.onclick = JustHide; //Start action on click
BTN_2.onclick = JustShow; //Start action on click
/script