How to use onclick in JavaScript

Question

I need to know how to use onclick so that it allows me to reuse the onclick method of a div over and over again and not have to add an infinite amount of them.
I don't want to have to do this:

<div id="div1" onClick="divFunction1()">
</div>
<div id="div2" onClick="divFunction2()">
</div>
<div id="div3" onClick="divFunction3()">
</div>
<div id="div4" onClick="divFunction4()">
</div>

But instead do something like this in JavaScript if possible:

div = document.getElementById("allPurposeDiv").onclick...

I'm not exactly sure what would come after onclick is the problem.

Any help is appriciated, Thanks!

Answer 1

onclick is case sensitive. So it is onclick. It expects a callback function to be assigned to it, which will be called.

document.getElementById("div1").onclick = divFunction;

If you are trying to add more events, then you need a event listener like what adeneo has suggested.

Answer 2

You should generally use addEventListener for that

document.getElementById('div1').addEventListener('click', function() {

    alert('clicked the DIV');

}, false);

or to reference a named function

function divFunction() {
    alert('clicked the DIV');
}

document.getElementById('div1').addEventListener('click', divFunction, false);

I have no idea why this would help you not add an infinite amount of elements ?