CSS button calling javascript function

Question

I created a button with CSS as follows:

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

Now I do not know how I can execute the javascript function when I click this button ?! onClick, as for HTML buttons, does not work here.

Could you help me? Thank!

EDIT: This is what I basically have:

HTML

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

Neither onClick nor onclick work. Javascript

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

Answer 1

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>

Run codeHide result

Answer 2

try it

You can use jquery.

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

Answer 3

jquery..

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


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


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

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

javascript :

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