Trouble getting the index of a child when it is clicked

Question

I'm trying to get the index of a child within a parent element. I followed the answer here, but ended up with an infinite loop.

My code so far:

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span = e.target;
    var spanSiblings = 0;

    while((span.previousElementSibling) != null ) {
        spanSiblings++;
    }

    console.log(spanSiblings);
});

The aim is to output 0 when the user clicks on the first span because it's the first child in the "spans" id:

<div id="spans">
    <span>This is span #1</span>
    <span>This is span #2</span>
    <span>This is span #3</span>
</div>

Any help would be appreciated.

Answer 1

Borrowing a little from jQuery, which checks the elements position with $.inArray in it's index function, you can do

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span  = e.target;
    var arr   = [].slice.call(spans);
    var index = arr.indexOf( span );

    console.log( index );
});

FIDDLE

Answer 2

As you are not changing the span variable in the loop, the condition will always be the same. If you assign the previous sibling to the variable, then it works:

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span = e.target;
    var spanSiblings = 0;

    while((span = span.previousElementSibling) != null ) {
        spanSiblings++;
    }

    console.log(spanSiblings);
});

<div id="spans">
    <span>This is span #1</span>
    <span>This is span #2</span>
    <span>This is span #3</span>
</div>

Answer 3

You have to modify your while loop condition. You don't have any condition to terminate the while loop. Change your while loop code to

while((span = span.previousElementSibling) != null ) {
    spanSiblings++;
}