How to set onClick with JavaScript?

I have been unable to reproduce the problem. Contrary to the OP’s findings, the line below works fine on the latest versions of IE, FF, Opera, Chrome and Safari.

link.onclick = function() {alert('clicked');};

You can visit this jsFiddle to test on your own browser:

http://jsfiddle.net/6MjgB/7/

Assuning we have this in the html page:

<div id="x"></div>

The following code works fine on the browsers I have tried it with:

var link = document.createElement('a');
link.appendChild(document.createTextNode("Hi"));
link.setAttribute('href', "#");
link.onclick= function() {link.appendChild(document.createTextNode("Clicked"));}

document.getElementById("x").appendChild(link);

If there is a browser compatibility issue, using jQuery should solve it and make code much much more concise:

var $link = $("<a>").html("Hi").attr("href","#").click(function (){$link.html("Clicked")})

$("#x").html($link)

If brevity is not a strong enough argument for using jQuery, browser compatibility should be … and vise versa 🙂

NOTE: I am not using alert() in the code because jsFiddle does not seem to like it 🙁