How to add click event to an element?

I would like to add a click event in plain JavaScript (without using jQuery) to an element like this, so I don't have an id but a class:

<a href="http://example.com/share" class="MyClass">Yummy</a>

Solution 1:

If you don't have an id and don't have any selector library and you want it to work in older browsers, then it takes a bit more work. If you can put an id on it, it's quite simple. If not, it takes more code:

var links = document.getElementsByClassName("MyClass");
links[0].onclick = function() {
    // put your click handling code here
    // return(false) if you don't want default click behavior for the link
}

Since getElementsByClassName is not universally available in older browsers, you would need a shim to implement it when not present. Or, you could get all the links in your document with:

var links = document.getElementsByTagName("a");

and then cycle through that list until you find the one you want (perhaps checking the class name).

If you can put an ID on the link:

<a href="http://braza.com/share" id="specialLink" class="MyClass" >Yummy</a>

Then, it just takes this code:

document.getElementById("specialLink").onclick = function() {
    // add code here
}

If you're going to do this regularly, the adding an event listener is a little more extensible than using the onclick property, but if you don't have any framework, then you need a function for adding an event listener that handles older versions of IE.

Solution 2:

There can be several ways of doing this.

One is you add the click event right in the anchor

as: <a href='' onclick='yourFunct()'> Yummy </a>

The other way can be using document.getElementsByTagName('a') you can get reference to all the href's as array then you can chose that particular href and add click event to it.

like: document.getElementsByTagName('a')[0].click = function(){ }

here 0 is just symbolic if u know the exact place in array you can give that index.

The third way can be you can write a custom. document.getElementsByClassName function in javascript and use it similiarly. You can find a number of implementations of getElementsByClassName by searching google.

look at http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ one of the implementation.