Web | Assignment to onclick event handler

by Zoltan Boros

HTML

<input id="button-1" type="button" value="Click Me (1)" />
<input id="button-2" type="button" value="Click Me (2)" />
<input id="button-3" type="button" value="Click Me (3)" />
<input id="button-4" type="button" value="Click Me (4)" />
<div id="output-container"></div>

CSS

* {
    font-family: Arial;
}
#output-container {
    margin: 1em 0 0 0;
}

JavaScript

var outputElement = document.getElementById('output-container');

function print(element)
{
	outputElement.innerHTML +=
    	'Caption of the event\'s source button: "'
        + element.value + '"<br />';
}

document.getElementById('button-1').onclick = print(this);
document.getElementById('button-2').onclick = 'print(this)';
document.getElementById('button-3').onclick = 'javascript:print(this);';
document.getElementById('button-4').onclick = function() { print(this) };