Как добавить обработчик события на каждый элемент массива?

Question

Нужна ваша помощь, только начал изучать обработчики событий.

var pictures = [..массив сгенерированных объектов];  
var showBigPicture = function (smallPicture) {..};
var picturesList = document.querySelectorAll('.picture');

for (var i = 0; i < picturesList.length; i++) {
  var index = i;
  picturesList[i].addEventListener('click', function () {
    showBigPicture(pictures[index]);
}

В результате клика по любому picturesList[i] event.target и отображаемая картинка всегда равны последнему элементу pictures[], а нужно чтобы была показана картинка, на которой был клик.
Подскажите, где я ошибся?

Answer 1

Потому что на момент выполнения

function () {
    showBigPicture(pictures[index]);
}

У вас переменная index будет равна последнему индексу в массиве, тут почитайте про разницу между let и var.

const pictures = [..массив сгенерированных объектов];  
const showBigPicture = function (smallPicture) {..};
const picturesList = document.querySelectorAll('.picture');

for (let i = 0; i < picturesList.length; i++) {
  picturesList[i].addEventListener('click', function () {
    showBigPicture(pictures[i]);
}

Попробуйте этот код

БЛОГ НА HUSL

Как добавить обработчик события на каждый элемент массива?

Ответы (1 шт):