How to add javascript to button?

Question

this might be very basic but I am still trying to figure it out because I cannot seem to get it correct.

The button

<a class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank"><span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span></a>

And I need to add this

<a href="Javascript://Camping Key Europe" onclick="CampingKeyEurope(' blank', 'sv')">Köp Camping Key Europe</a>

Some things needs changing such in the next code but you get the idea, how can I make button work, so when they press it it open module? When I use the second code without button and only link, it works fine, module shows up.

Please help :)

The method you're using is severely outdated, look into external event handlers with `addEventListener` — Sterling Archer, Jan 22 '18 at 15:30
see https://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function for more information — Yaco Zaragoza, Jan 22 '18 at 15:32
I am using this code with Wordpress, this button is generated by the theme and I am trying to edit it. — VFXStation, Jan 22 '18 at 15:32
In first case, your are using target="-blank" which means The target attribute specifies where to open the linked doc. Where as in the second case youn didn't use target attribute. I think you are trying to open the new page onclick. If yes, follow this: Share Page — Kishor Velayutham, Jan 22 '18 at 15:34

score 2 · Accepted Answer · answered Jan 22 '18 at 15:34

Try this

<button type="button" class="fusion-button-text fusion-button-text-left" 
onclick="CampingKeyEurope(' blank', 'sv')">Button Text</button>

Building off the comment by Sterling Archer, you should attach event listeners outside of your HTML, so if you are using JQuery, in your $(document).ready() function you would add your onclick event there to your button like so:

$('.fusion-button-text.fusion-button-text-left').on('click', function() {});

I did this before you answered and it worked, but thanks anyway! — VFXStation, Jan 22 '18 at 15:37

score 0 · Answer 2 · answered Jan 22 '18 at 15:38

Try using an event listener:

<a id="btn" class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank">
  <span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span>
</a>

document.getElementById('btn').onclick = function () { 
  CampingKeyEurope(' blank', 'sv');
};

score 0 · Answer 3 · answered Jan 22 '18 at 15:41

0

I suggest looking through here, Its very useful: https://www.w3schools.com/jsref/event_onclick.asp

answered Jan 22 '18 at 15:41

Daniel Larter

1
1

Thatsnks for posting an answer its what makes this community work. Pages from W3schools can be an unreliable source and are generally frowned upon on SO. I recommend using the [Mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) reference pages instead – happymacarts Jan 22 '18 at 15:47

How to add javascript to button?

3 Answers3