JavaScript : How to get a name of an element index?

Question

Need to get index number of the element from the array of elements

<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 0-->
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 1-->
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 2-->
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 3-->
...
<script>
function getindex(obj) {
    var i = obj.index; //here is wrong. How to get index?
}
</script>

you can't get index for what you are trying. try giving ids for inputs and access it like obj.id — Dinesh undefined, May 23 '17 at 06:22
Are you trying to get the index of the array without any additional data? — Sagar, May 23 '17 at 06:25
I'm not sure this should be a duplicate. The poster in the question marked duplicate has a different issue. His solution to this problem is overkill when you can easily just pass the index like in my answer — Charlie Martin, May 24 '17 at 16:52

score 2 · Answer 1 · answered May 23 '17 at 06:23

A method less prone to problems when you change the page, would be to assign the values to a data attribute:

<input type="button" name="test" value="test" onclick="getindex(this)" data-index="0"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="1"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="2"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="3">

Then retrieve the index from that data attribute:

<script>
function getindex(obj) {
    var i = parseInt(obj.dataset.index,10);
}
</script>

Just pass the index to the function – Charlie Martin Jun 02 '17 at 20:50 — Charlie Martin, Jun 02 '17 at 20:50

score 1 · Answer 2 · answered May 23 '17 at 06:30

Add an attribute called index to html button and then try to access it on button click. You can use this.

<input type="button" index='0' name="test" value="test" onclick="getindex(this)"> <!--index 0-->
<input type="button" index='1' name="test" value="test" onclick="getindex(this)"> <!--index 1-->
<input type="button" index='2' name="test" value="test" onclick="getindex(this)"> <!--index 2-->
<input type="button" index='3' name="test" value="test" onclick="getindex(this)"> <!--index 3-->

<script>
    function getindex(obj) {
        var i = obj.getAttribute('index');
    }
</script>

score 0 · Answer 3 · answered May 23 '17 at 06:25

Because the element itself doesn't know anything about any indices, it is not possible this way. One alternative to solve this problem would be to create the buttons dynamically:

<script>
    for (var i = 0; i < 4; i++) {
      var onClick = function () {
        console.log(i);
      }

      var button = document.createElement('button');
      button.onclick = onClick;
      document.querySelector('body').appendChild(button); 
    }
</script>

Charlie Martin · Answer 4 · 2017-05-24T16:47:20.460

You don't need to add an attribute...

here is a fiddle

<script type="text/javascript">
    function getindex(index) {
        alert(index);
    }
</script>

<input type="button" name="test" value="test" onclick="getindex(0)">
<input type="button" name="test" value="test" onclick="getindex(1)">
<input type="button" name="test" value="test" onclick="getindex(2)">
<input type="button" name="test" value="test" onclick="getindex(3)">

JavaScript : How to get a name of an element index?

4 Answers4