abhinav singh
abhinav singh

Reputation: 862

Handling onclick events

I have a list which contains links. I am using this code to access them:

function initAll() {
 
 var allLinks = document.getElementById("nav").getElementsByTagName("a");
 for (var i=0; i< allLinks.length; i++) {
    allLinks[i].onmouseover = showPreview;
    allLinks[i].onmouseout = function() {
         document.getElementById("previewWin").style.visibility = "hidden";
         allLinks[i].onclick=mainProcess;
        }
    }
}

function mainProcess(evt){
    alert(this.value);
    false;
}

This is not the exact code, what I am trying to do is that I need to identify link is clicked and perform some function on the basis of link clicked. I don't know where code needs to be modified... Page is giving error on the allLinks[i].onclick=mainProcess(this); line.

Now the problem is that I don't know how I should handle all the three events?

Upvotes: 0

Views: 122

Answers (3)

Richard Dalton
Richard Dalton

Reputation: 35793

Try changing to this:

for (var i = 0; i < allLinks.length; i++) {
   allLinks[i].onclick = mainProcess;
}

function mainProcess(event) {
{
    alert(this.value);
    return false;
}

Upvotes: 0

Flambino
Flambino

Reputation: 18773

1) You're setting the onclick property of each of the links to be the value returned by mainProcess() - which always returns false. So, in effect, you're writing allLinks[i].onclick = false;

2) When you define an event handler directly, the argument that gets passed to it when the event fires, is the event object - not the element it was fired on.

To figure out the element, you can either look in the event object, or (since the handler has been added to the element itself) simply use this, as that will refer to the link element

for (var i = 0; i < allLinks.length; i++) {
   allLinks[i].onclick = mainProcess;
}

function mainProcess(event) {
{
    alert(this.value);
    return false;
}

Upvotes: 1

Andrius Virbičianskas
Andrius Virbičianskas

Reputation: 556

You do need to pass this to mainProcess(link). As stated in http://www.quirksmode.org/js/events_tradmod.html "No parentheses!" and "this" chapters. Check it out, there's an example there too. Should be everything you need.

Upvotes: 0

Related Questions