Id & attributes - call js function on click

Design help Custom code
1

Hi,

I have custom code botton that onclick calls a function, such as:

<button id="open-popup" onclick="showMailingPopUp(); return false;">Subscribe to our mailing list</button>

The idea is to have the fuction called by a WEBFLOW button directly.

Do you have any idea to make that work?

I tired several things allready posted on the forum… cant make it work :frowning:

i.e. Add onClick attribute to any element with this JS snippet - #3 by AdventureStudios

Thanks!

1 Like
2

Add id to webflow button (“open-popup” in your case) and “run function X” on click.

<button id="open-popup" onclick="showMailingPopUp(); return false;">Click her</button>

<script>
var button = document.getElementById("open-popup");

button.addEventListener('click', (event) => {
  event.preventDefault();
   showMailingPopUp(); /* run showMailingPopUp function */

});

function showMailingPopUp() {
  document.getElementById("open-popup").innerHTML = "showMailingPopUp RUN!";
}
</script>

The click event should be above showMailingPopUp function.

The idea of return false; her:
https://stackoverflow.com/questions/11184276/return-false-from-jquery-click-event

3

thanks @Siton_Systems

I added the function as you said and the ID to the button but seems that I didt make it work…

The function I added is from below:

Works fine when I add the custom code button, but can’t make it work with a standard Webflow button or link with the correcit id=open-popup

The code I inserted origanly that works is:

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>

<script>

function showMailingPopUp() {
require(
["mojo/signup-forms/Loader"],
function(L) {
  L.start({"baseUrl":"mc.us19.list-manage.com","uuid":"06401b27ca893730063249a5c","lid":"08e32bbaa8"})
});

document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';}

document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>

<button id="open-popup" onclick="showMailingPopUp(); return false;">Subscribe to our mailing list</button>
4

The code works fine (Run function on click). I even use your code (On click the popup open)

https://codepen.io/ezra_siton/pen/NoNEKj

Maybe on webflow you put the code in wrong spot.

5

All good now, my mistake i was running the function within the addEventListener

Thanks for your help

6

Hi, the same show/hide will work. You only need the button ID and add the button as code using WF class.
Drop a button on the page and copy the html and then add a “onclick”.

<button aria-label=“Click here" id=“ember45” class=“btn-default bookmark btn btn-icon-text ember-view” onclick=“JustShow();” >

Bookmark

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


Studio: 1-866-957-9808 Mobile: 1-402-680-6478 Skype: AdventureStudios Web: www.AdventureStudio.com Instagram: AdventureStudio