Get Index of Clicked Element Using Pure JavaScript

Get index of clicked element using pure javascript

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

Get index of clicked element

You can take advantage of closures.

var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));
for (var i = 0; i < getThumbs.length; i++) {
    getThumbs[i].onclick = function(index) {
        return function(e) {
            //Your current function, where index now is the same as i at the moment of assigning the event listener
        };
    }(i);
}

Or, you could add a data attribute to each element, either in the html (something like data-index="1"), or setting them from js:

var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));
for (var i = 0; i < getThumbs.length; i++) {
    getThumbs[i].dataset.index=i;
    getThumbs[i].onclick = function(e) {
        var index=this.dataset.index;
        //....
    };
}

How to get index number of clicked element from MouseEvent object

You can use Array#indexOf on the children of the parent of event.target, if all the elements you may want the index of have the same parent.

document.addEventListener('click', function (e) {
  var target = e.target;
  var parent = target.parentNode;
  var index = [].indexOf.call(parent.children, target);
  console.log("index:", index);
});

<div id="container">
<div>1z</div>
<div>2z</div>
<div>3z</div>
<div>4z</div>
<div>5z</div>
<div>6z</div>
</div>

get index of class element with inline onclick - pure js no jQuery

Just get the array of all the elements and find the current element who received the click

function show(el) {  var els = Array.prototype.slice.call( document.getElementsByClassName('show'), 0 );  console.log(els.indexOf(event.currentTarget));}

<span class="show" onclick="show(this)">span 1</span><span class="show" onclick="show(this)">span 2</span><span class="show" onclick="show(this)">span 3</span>

How to get index of an array element in click event with JavaScript

Maybe you can convert the Object selector to an array and then you can use an indexOf.

var checks = document.querySelectorAll('.optionBox');

checks.forEach(function(check){
  check.addEventListener('click', checkIndex);
})

function checkIndex(event){
  console.log( Array.from(checks).indexOf(event.target) );
}

How to get the index of the clicked array element using JavaScript?

You could pass the current length of the data array as index to your function:

boundItemClick(idx, e) { // add idx as argument
    console.log(idx);
}
render() {
    var data=[];
    data.push (<div>
        <span>{textLabel} onClick={this.boundItemClick.bind(this, data.length)}</span>
        </div> );
}