JS onclick не работает правильно

Question

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

Я сделал что-то не так? Может ли быть уместным тот факт, что я использую отдельную подпрограмму Javascript, основанную на Jquery?

function setup () {
    var images = document.getElementById("mycarousel");
    images = images.getElementsByTagName("img");

    for (var i = 0; i< images.length; i++) {
        images[i].onclick = imgReplace (images[i]);
    }

}

Answer 1

Ничего себе, я только что исправил эту неловкую ошибку в моем собственном коде. Все остальные поняли это неправильно:

images[i].onclick = function() {imgReplace(images[i]);};

не будет работать. Вместо этого должно быть:

images[i].onclick = (function(i) { return function() { imgReplace(images[i]); }; })(i);

Ответ Пола Александра находится на правильном пути, но вы не можете решить проблему, введя другую локальную переменную, подобную этой. Блоки JavaScript (например, блок {} в цикле for) не создают новых областей видимости, что является существенным (и неочевидным) отличием от Java или C ++. Только функции создают область действия (оставляя в стороне некоторые новые функции ES5), поэтому выше была представлена ​​другая функция. Переменная «i» из цикла передается в качестве параметра анонимной функции. Эта функция возвращает фактическую функцию-обработчик события, но теперь «i», на которую она ссылается, будет отдельным параметром области действия внешней функции. Поэтому каждая итерация цикла создаст новую область видимости, посвященную этому единственному значению «i».

Answer 2

Что вы хотите сделать здесь:

images[i].onclick = function() {imgReplace(images[i]);}

попробуйте.

Приветствия

Answer 3

Вы присваиваете результат вызова imageReplace обработчику onclick. Вместо этого оберните вызов imageReplace в его собственную функцию

images[i].click = function(){ imgReplace( images[i] ) }

Однако, это всегда заменит последнее изображение. Вам нужно создать новую переменную для включения индекса

for (var i = 0; i< images.length; i++) {
    var imageIndex = i;
    images[i].onclick = function(){ imgReplace (images[imageIndex]); }
}