views:

52

answers:

3

I have the following HTML page:

<html>
    <head>
        <script type="text/javascript" src="JavaScript/Menu.js"></script>
    </head>
    <body>
        <ul>
            <li><a onclick="GetIndex(this)">One</a></li>
            <li><a onclick="GetIndex(this)">Two</a></li>
            <li><a onclick="GetIndex(this)">Three</a></li>
            <li><a onclick="GetIndex(this)">Four</a></li>
        </ul>
    </body>
</html>

And the Menu.js javascript:

function GetIndex(sender)
{   
    var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
    var aElementsLength = aElements.length;

    var index;
    for (var i = 0; i < aElementsLength; i++)
    {
        if (aElements[i] == sender) //this condition is never true
        {
            index = i;
            return index;
        }
    }
}

Why is the commented condition never met? How do I compare if the two HTML elements are equal in Javascript? Thanks for all the help.

A: 

Are you sure GetIndex function gets executed on click event on anchor tag?

Try by giving href attribute to anchor tag. You can write either

<a href="#" onclick="GetIndex(this)">One</a>

or

<a href="javascript:void(0)" onclick="GetIndex(this)">One</a>

here is the working example http://jsfiddle.net/QfRSb/

Chinmayee
I am quite sure, because in my 'real' example, the backgrounds of the `<a>` elements are changing in the loop. That proves that the function does get executed. (BWT, I am using Chrome. I don't know if it matters...)
Boris
you mean onclick="GetIndex(this); return false" !!!
mplungjan
no, I meant `if (aElements[i] == sender)` returns false.
Boris
http://jsfiddle.net/QfRSb/
Chinmayee
A: 

Your code seems to work...

Thomas F.
A: 

"Your code is correct"

indieinvader
sweet! cheers :)
Boris
`(\/) (°,,°) (\/)` WOOBwoobwoobwoob!
indieinvader