Неверная переменная при циклизации всего элемента в ноделисте

Question

Я создаю нодлист, который выбирает 2 divs. Затем я создаю функцию, показывающую индекс div, который пользователь нажимает. Но выход всегда равен 2. Я не понимаю, где ошибка.

Это простая проблема, но она решит мои другие сложные проблемы со многими событиями внутри событий. Благодарю.

HTML:

<div style="background:red; height:50px"></div> 
<div style="background:black; height:50px"></div> 

Javascript:

var div = document.getElementsByTagName('div'); 

for (i = 0; i < div.length; i++) { 
    div[i].onclick = function() { 
     alert(i); 
    } 
} 

Пример: https://jsfiddle.net/vutienphat/tm279uot/

Answer 1

Попробуйте это:

В вашем случае, значение i не что иное, как значение i уже в конце цикла, который length-1 списка узлов.

var div = document.getElementsByTagName('div'); 
 

 
for (i = 0; i < div.length; i++) { 
 
    div[i].onclick = (function(i) { 
 
    return function() { 
 
     alert(i); 
 
    } 
 
    })(i) 
 
}

<div style="background:red; height:50px"></div> 
 
<div style="background:black; height:50px"></div>

Fiddle here

Answer 2

Выход всегда 2, потому что вы сообщаете переменной приращение, которое уже закончилось к тому времени кто-то щелчки. Рассмотрим следующий код логики вместо

function index(element) { 
 
    for (var i = 0; element = element.previousElementSibling; i++); 
 
    return i; 
 
} 
 

 
divs = document.getElementsByTagName('div'); 
 

 
for (i = 0; i < divs.length; i++) { 
 
    divs[i].onclick = function() { 
 
     alert(index(this)); 
 
    } 
 
}

<div style="background:red; height:50px"></div> 
 
<div style="background:black; height:50px"></div>