Самый быстрый и простой способ - заменить
var i на
let i.
Но есть и другие варианты.
Можно перебирать элементы через forEach вместо обычного цикла, индекс будет всегда правильный:
document.querySelectorAll('li').forEach((n, i) => {
n.addEventListener('click', e => {
console.log(i);
});
});
Или, прицепить индексы к элементам в качестве data-атрибутов:
const onClick = e => console.log(e.target.dataset.index);
const li = document.getElementsByTagName('li');
for (let i = 0; i < li.length; i++) {
li[i].dataset.index = i;
li[i].addEventListener('click', onClick);
}
Или, вычислять индекс самостоятельно:
document.querySelector('ul').addEventListener('click', e => {
if (e.target.tagName === 'LI') {
const i = [...e.currentTarget.children].indexOf(e.target);
console.log(i);
}
});
