How to set onClick with JavaScript?

Question

I am trying to set the onclick event using javascript. The following code works:

var link = document.createElement('a'); link.setAttribute('href', "#"); link.setAttribute('onclick', "alert('click')"); 

I then use appendChild to add link to the rest of the document.

But I obviously would like a more complicated callback than alert, so I tried this:

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

and this:

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

But that does nothing. When I click the link, nothing happens. I have testing using chrome and browsing the DOM object shows me for that element that the onclick attribute is NULL.

Why am I not able to pass a function into onclick?

EDIT:

I tried using addEventListener as suggested below with the same results. The DOM for the link shows onclick as null.

My problem may be that the DOM for this element might not have been fully built yet. At this point the page has been loaded and the user clicks a button. The button executes javascript that builds up a new div that it appends to the page by calling document.body.appendChild. This link is a member of the new div. If this is my problem, how do I work around it?

Answer 1

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 :-(

Answer 2

You can add a DOM even listener with addEventListener(...), as David said. I've included attachEvent for compatibility with IE.

var link = document.createElement('a'); link.setAttribute('href', "#"); if(link.addEventListener){    link.addEventListener('click', function(){       alert('clicked');    }); }else if(link.attachEvent){    link.attachEvent('onclick', function(){       alert('clicked');    }); }