Как узнать текущий индекс элемента на нативном JS?

Question

[Денис]

Всем привет! На jQuery узнать текущий индекс элемента не составляет труда как написать такой цикл:

var buttons1 = $('button');

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

а вот на нативном JS попробовал аналогично сделать и понял, что мало знаю об области видимости...Кто поможет?

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


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

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

Это мой вариант, но он не работает. В общем при нажатии на кнопку выводится сообщение с индексом этой кнопки. Вариант с jQuery работает, а с JS нативным - нет.

Comments

[murrometz]

Интересно, а как это работает (jQuery - вариант)? Переменная i сразу подставляется или как?

[Денис]

вариант с jQuery работает, можешь сам проверить

[murrometz]

Денис: Да, я проверил. Я просто хочу понять, как он работает. Ведь функция click вызывается после привязки к элементу - откуда там переменная i?

[Денис]

Спасибо большое, но у меня вопрос маленький, почему цикл сразу прошел по элементам, и мы не имели непосредственно на каждой итерации доступ к индексу?

[dimzon541]

на каждой итерации непосредственно в теле цикла имели а в обработчике клика - потеряли

[Денис]

не хочу быть навязчивым, но можно в нескольких слов объяснить почему в теле обработчика события мы не имеем доступа к переменной i? Она же вроде должна быть видимой для вложенной функции.

[amatory10]

Денис: понимаете суть в том что когда вы уже после цикла нажимаете кнопку, переменная i обращается к глобальной переменной которая уже равна buttons.length

[Денис]

так я же не после цикла нажимаю на кнопку, а в теле цикла, для каждого элемента формируется обработчик клик, и в нем я пытаюсь получить доступ к текущей итерации..это ведь происходит в теле цикла!

[amatory10]

Денис: нет ну как вы можете нажать во время работы цикла, если он выполняется за доли секунды. Вы даже скажем можете поместить в тело цикла setTimeout(func, 0) и она все равно выполнится по завершению цикла.

[Алексей Уколов]

Денис: я же дал вам ссылку на подробнейшее объяснение.

[Денис]

Всем спасибо

Answer 1

[Ivanq]

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);
}

Comments

[sharpsss]

ай харашо, ай спасибо, то что искал )

Answer 2

[Алексей Уколов]

Нужно оборачивать вашу функцию в замыкание.
Вот почему.

Answer 3

[damir12345]

const  buttons = document.querySelectorAll('button');
buttons.forEach(elem, index) => {
    elem.addEventListener('click', function () {
        console.log(index);
    })
})

const