Get index of clicked element using pure javascript

Question

I need to know the index of clicked element. Can't figure out how to do it

for (i = 0; i < document.getElementById('my_div').children.length; i++) {
    document.getElementById('my_div').children[i].onclick = function(){'ALERT POSITION OF CLICKED CHILD'};
}

this.index?

here is a example of what I am trying to do (it only gives back 6):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;}
#container div{height:50px;line-height:50px; text-align:center}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script>
for (i = 0; i < document.getElementById('container').children.length; i++) {
    document.getElementById('container').children[i].onclick = function(){alert('Number ' + i + ' was clicked')};
}
</script>
</body>
</html>

possible duplicate of Javascript closure inside loops - simple practical example — Felix Kling
– Felix Kling, Commented Jan 10, 2012 at 11:01

MelkorNemesis · Accepted Answer · 2017-09-20 17:38:12Z

61

With ES6 destructuring you can do

const index = [...el.parentElement.children].indexOf(el)

or

const index = Array.from(el.parentElement.children).indexOf(el)

or ES5 version

var index = Array.prototype.slice.call(el.parentElement.children).indexOf(el)

answered Sep 20, 2017 at 17:38

MelkorNemesis

3,4552 gold badges22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashwin Krishnamurthy · Accepted Answer · 2018-02-07 08:01:03Z

44

Here is a piece of code that can help you get the index of the clicked element inside the for loop. All you need is a new scope:

var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{

    (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

}

Edit 1: Incorporating user Felix Kling's comments into the answer.

event handler already is a closure

Edit 2: Updated fiddle link

edited Feb 7, 2018 at 8:01

answered Jan 10, 2012 at 10:54

Ashwin Krishnamurthy

3,7563 gold badges30 silver badges49 bronze badges

5 Comments

Felix Kling Over a year ago

Strictly speaking the event handler already is a closure. What the OP needed was a new scope.

rohan-patel Over a year ago

Any idea why the code may be failing to show any output? I tried both Safari and Google.

Ashwin Krishnamurthy Over a year ago

@rohan-patel That is odd. Here is a newer fiddle: jsfiddle.net/gffwse8q (tested in Chrome and Safari).

rohan-patel Over a year ago

Thanks for the update! Not sure why it was broken. Maybe version change?

MelkorNemesis Over a year ago

See my second answer on this page, this solution is far for optimal. stackoverflow.com/questions/8801787/…

MelkorNemesis · Accepted Answer · 2018-02-08 07:54:05Z

7

The accepted answer (from Ashwin Krishnamurthy) is actually far from optimal.

You can just do:

const g = document.getElementById('my_div');
for (let i = 0, len = g.children.length; i < len; i++)
{
    g.children[i].onclick = function(){
        alert(index)  ;
    }
}

to avoid creating unnecessary closures. And even then it's not optimal since you're creating 6 DOM event handlers (6 divs in the example above) just to get a number of a single clicked div.

What you should actually do is use an event delegation (attach single click event to the parent) and then check the e.target's index using the method I've mentioned earlier and above (Get index of clicked element using pure javascript).

answered Feb 8, 2018 at 7:54

MelkorNemesis

3,4552 gold badges22 silver badges21 bronze badges

3 Comments

MelkorNemesis Over a year ago

Not sure why this has -1 since it's better solution than any mentioned here ;)

codemonkey Over a year ago

it just doesn't work. have you even tried running it?

dactyrafficle Over a year ago

At present I think this is the best answer. Since we have the option to use 'let' to keep 'i' local in scope, in this case it's superior to 'var' and we don't need to write the anon self invoking function to define our own local variable. Just change it to 'alert(i)' not alert(index) since index is not defined in your code @MelkorNemesis

Michiel J Otto · Accepted Answer · 2020-11-06 07:40:50Z

5

I had the same issue where I needed to loop through an array and get the index number of the item clicked.

Here is how I solved the issue...

//first store array in a variable
let container = [...document.getElementById('container')];

//loop through array with forEach function
container.forEach((item,index) => {
    item.addEventListener('click', () => console.log(index));
});

This will console.log the index number of the item clicked on.

Hope this answers some questions.

edited Nov 6, 2020 at 7:40

answered Jun 18, 2019 at 19:04

Michiel J Otto

2,34122 silver badges13 bronze badges

1 Comment

Om Shankar Over a year ago

When you are using a forEach, you don't need to do container.indexOf. Just change your forEach(item => { syntax to forEach((item, index) => { and you have the index !!

LocalPCGuy · Accepted Answer · 2021-10-18 18:56:47Z

5

I made a function to find the index.

function getElementIndex(el) {
  return [...el.parentElement.children].indexOf(el);
}

Call it like this:

const index = getElementIndex(element);

edited Oct 18, 2021 at 18:56

LocalPCGuy

6,1352 gold badges35 silver badges28 bronze badges

answered Feb 15, 2020 at 13:36

Jens Törnell

25k46 gold badges132 silver badges223 bronze badges

Comments

Bergi · Accepted Answer · 2012-01-10 10:58:20Z

2

Table cell elements have a cellIndex property, but I don't know about other elements. You will either have to

create a closure to reserve the value of i
dynamically count previousSiblings
add an index property in your for-loop and read that (don't augment host objects).

The closure approach will be the easiest, I think. Please make sure you have understood how closures work, there are good explanations on the web.

function makeAlertNumber(element, i) {
    element.addEventListener('click', function() {
       alert('Number ' + i + ' was clicked');
    }, false);
}
[].slice.call(document.getElementById('container').children).forEach(makeAlertNumber); // homework: find a way to express this for older browsers :-)

edited Jan 10, 2012 at 10:58

answered Jan 10, 2012 at 10:38

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

1 Comment

Hakan Over a year ago

THanks Bergi, would you like to show an example in the code I added?

jAndy · Accepted Answer · 2012-01-10 10:31:27Z

1

The index in relationship to what ?

If it is about the index within the current HTML collection, the index would just be represented with your i counter variable.

One word of caution: Since HTMLCollections are "Live", you should ever use them to figure out the .length within a loop. If it happens to be that those elements are added or removed within the loop, strange and dangerous things can happen. Cache the .length value before calling the loop instead.

answered Jan 10, 2012 at 10:31

jAndy

237k57 gold badges313 silver badges363 bronze badges

3 Comments

jAndy Over a year ago

@david: indeed. Totally forgot about this fact :)

Hakan Over a year ago

Thanks jAndy. The index related to the other children. Added a example if you want to have a look

Brenden Over a year ago

You could also simply loop over the elements in reverse order

vardolind · Accepted Answer · 2020-08-27 14:30:58Z

1

for (let i = 0; i < childNodes.length; i++){
      (function(index){
        childNodes[i].addEventListener("click", myScript);
        function myScript(){
          console.log(index);
        }
      })(i);
    }

answered Aug 27, 2020 at 14:30

vardolind

114 bronze badges

1 Comment

Om Shankar Over a year ago

If you are using let, you don’t need the IIFE.

Akshay Vijay Jain · Accepted Answer · 2016-10-10 15:14:51Z

0

getIndexOfNode: function(node){ var i = 1; while(node.previousElementSibling != null){ i++ } return i; }
the function will return the index of the node passed in its parent element.

answered Oct 10, 2016 at 15:14

Akshay Vijay Jain

16.3k9 gold badges73 silver badges85 bronze badges

1 Comment

Johnny5k Over a year ago

node never changes, so this is an infinite loop.

Gobi · Accepted Answer · 2021-10-25 03:30:26Z

0

getIndexOfNode = function(node){
    var i = 1;
    while(node.previousElementSibling != null){
      node = node.previousElementSibling;
        i++
    }
    return i;
}

answered Oct 25, 2021 at 3:30

Gobi

1

1 Comment

nima Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂

Collectives™ on Stack Overflow

Get index of clicked element using pure javascript

10 Answers 10

Comments

5 Comments

3 Comments

1 Comment

Comments

1 Comment

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

5 Comments

3 Comments

1 Comment

Comments

1 Comment

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related