CSS Button calling a javascript function

Question

I have created a button with CSS like this:

<div class="button">Click me!</div>

Now I don't know how I can execute a javascript function when this button is clicked?! onClick like for HTML buttons doesn't work here.

Can you please help me? Thank you!

EDIT: This is what I have basically:

The HTML

<span class="button" onClick="farmArbeiter()" style="margin-left: 25%;">Kaufe Arbeiter</span>

Neither onClick nor onclick do work. The javascript

function farmArbeiter() { alert("it works");}

I know but these buttons look ugly and don't fit to my site. — ColdStormy
– ColdStormy, Commented Dec 25, 2014 at 15:29
Create some button by using <button> tag then give button class to this button. You can use onclick method now. — Cracker
– Cracker, Commented Dec 25, 2014 at 15:30

Banana · Accepted Answer · 2014-12-25 15:38:03Z

6

attach a click event handler to it using javascript:

document.getElementById("BT1").addEventListener("click", function(){
    alert("oh snap, i was clicked...");
});

<div class="button" id="BT1">Click me!</div>

answered Dec 25, 2014 at 15:38

Banana

7,4843 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ColdStormy Over a year ago

Weird, on snippet it works but when I copy your code on my page it doesn't work anymore?

Banana Over a year ago

you need to wrap this part in a block that runs after dom loads, the snippet loads fast but your page loads slower and the button is not found by javascript when the script executes

ColdStormy Over a year ago

Boy am I... I've found the mistake. My external javascript file was not linked correctly. Now it works. Phew, thank you anyway! :D

A.T. · Accepted Answer · 2014-12-25 15:37:25Z

2

there are several ways using jquery..

$(document).on('click','.button',function(e){ //your code  });


$('.button').on('click',function(e){ //your code  });


$('.button')[0].onclick = MyFunction;

function Myfunction()
{
  //your code...
}

with javascript you can:

document.getElementsByClassName('button')[0].onclick = function(event){ 
  //your code 
 }

answered Dec 25, 2014 at 15:37

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

Comments

Muhammed Shuhaib · Accepted Answer · 2014-12-25 15:31:24Z

1

try this

You can use jquery.

$('.button').click(function(){ -- code --});

answered Dec 25, 2014 at 15:31

Muhammed Shuhaib

3146 silver badges20 bronze badges

Collectives™ on Stack Overflow

CSS Button calling a javascript function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related