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");}

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>

Answer 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 
 }