CODEWITHSUNDEEP
javascript
mjr
mjr

Reputation: 2113

How to set onClick with JavaScript?

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?

Upvotes: 53

Views: 132506

Answers (7)

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

This is the best way!

<a id="btn" onclick='alert("Hello people up vote please...! Thanks");'>Run Function</a>

Upvotes: 0

HoldOffHunger
HoldOffHunger

Reputation: 20891

If you have a named function, i.e., function funcName() {...} already defined, then the process is simply to identify onclick with the name of the function:

document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
    document.getElementById("demo").innerHTML=Date();
}
<button id="myBtn">Try it</button>
<p id="demo"></p>

This can help keep your code better organized. A function can be quite long, and defining it singularly to a single onclick, and not some independent variable that can be referenced later, might end up creating spaghetti code.

Upvotes: 2

HoldOffHunger
HoldOffHunger

Reputation: 20891

If you're doing this with JavaScript, then use addEventListener(), with addEventListener('click', function(e) {...}) to get the event stored as e. If you don't pass in the event like this, it will not be accessible (although Chrome appears to be smart enough to figure this out, not all browsers are Chrome).

Full Working JSBin Demo.

StackOverflow Demo...

document.getElementById('my-link').addEventListener('click', function(e) {
  console.log('Click happened for: ' + e.target.id);
});
<a href="#" id="my-link">Link</a>

Upvotes: 15

Miltos Kokkonidis
Miltos Kokkonidis

Reputation: 3996

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

Upvotes: 48

Marios Fakiolas
Marios Fakiolas

Reputation: 1545

Use sth like this if you like: 

<button id="myBtn">Try it</button>
<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>

Upvotes: 2

bfavaretto
bfavaretto

Reputation: 71918

Setting an attribute doesn't look right. The simplest way is just this:

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

But using addEventListener as JCOC611 suggested is more flexible, as it allows you to bind multiple event handlers to the same element. Keep in mind you might need a fallback to attachEvent for compatibility with older Internet Explorer versions.

Upvotes: 2

JCOC611
JCOC611

Reputation: 19719

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

Upvotes: 8

Related Questions