Retrieve index of an html element

techkate · Jan 25, 2007

Is it possible to retrieve the index of an html element (ie Input button) that is in an array?

For example:

Code:

<html>
    <input type="button" id="theButton" value="Button One" onclick="theButton_onclick();"/>
    <br><br>
    <input type="button" id="theButton" value="Button Two" onclick="theButton_onclick();"/>
    <br><br>
    <span>You pressed: </span><span id="testResult"></span>
</html>

<script language="javascript">
    function theButton_onclick(){
        var buttonPushedID = event.srcElement.id;
        testResult.innerText = buttonPushedID;
        
        /*
        I want to preserve the identifier for which button was pushed.  
        However, I only want to preserve the value as text, not as an object.
        For example, I would use something like:
            eval('document.all.' + buttonPushedID);
        If I do that, however, without referencing the index, I would obviously get an error.
        So is there a way to preserve the array index of the button?  I would love it if I could do:
            var buttonPushedIDArray = event.srcElement.id + "(" + event.srcElement.index + ")";
        But alas, there is no index attribute.
        */
    }
</script>

Kate

[small]"Forever dork"[/small]

monksnake · Jan 25, 2007

First you have id's for the buttons that are the same, id's are supposed to be unique. I'd name one button id "button1" and the other "button2". On the javascript function call, you can pass the button object or the id to the button obj. All like so:

Code:

    <input type="button" id="[COLOR=red]button1[/color]" value="Button One" onclick="theButton_onclick([COLOR=red]this.id[/color])"/>
    <br><br>
    <input type="button" id="="[COLOR=red]button2[/color]" value="Button Two" onclick="theButton_onclick([COLOR=red]this.id[/color])"/>
    <br><br>
    <span>You pressed: </span><span id="testResult"></span>

You function would look like this:

Code:

    function theButton_onclick(objId){
       if (objId == "button1") {
          document.getElementById("testResult").innerHTML = "Button 1";
       }
       else {
          document.getElementById("testResult").innerHTML = "Button 2";
       } 
    }

techkate · Jan 25, 2007

Thanks monksnake,

I purposely have the id's the same. In my actual code, the controls I'm dealing with are created on an ad-hoc basis, having the same id's. I'm hoping to find a way to get this to work while keeping the logic the same.

Kate

[small]"Forever dork"[/small]

monksnake · Jan 25, 2007

Hmm ok in that case you can get a document.getElementsByTagName("input") and pull all the input elements into an array.

Not sure what you could do with it, but it will "index" the buttons

kaht · Jan 25, 2007

I purposely have the id's the same.

This is syntactically incorrect, and will produce errors when ran through the w3c validator. If you really must have an identifier that groups multiple elements together, use name instead of id. The id attribute is used specifically to give each element a unique identifier if needed. This is the reason that the javascript functions exist as get[!]Element[/!]ById and get[!]Elements[/!]ByName, as you notice the word "element" is singular for id and plural for name.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Retrieve index of an html element

techkate

Programmer

monksnake

Programmer

techkate

Programmer

monksnake

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor