How to get the current index of an element in native JS?

Question

JavaScript

Hello! In jQuery, finding out the current index of an element is not difficult, how to write a loop like this:

var buttons1 = $('button');

  buttons1.each(function(i) {
    $(this).click(function() {
      alert(i + 1);
    });
  });

but on native JS I tried to do the same and realized that I know little about the scope ... Who can help?

var buttons = document.querySelectorAll('button');


  for(var i = 0; i < buttons.length; i++) {
    var button = buttons[i];

    button.onclick = function() {
      alert(this.innerHTML +  i);
    }
  }

This is my version, but it doesn't work. In general, when you click on a button, a message is displayed with the index of this button. The jQuery option works, but not with native JS.

Answer 1

var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
    (function(i) {
        var button = buttons[i];
        button.onclick = function() {
            alert(button.innerHTML + i);
        }
    })(i);
}

Answer 2

You need to wrap your function in a closure .
That's why .