Почему функция обработки onclick не работает должным образом?

Question

У меня есть следующий маленький кусочек кода:

var instance = this;
window.onload = function () {
    for (var i = 0; i < array.length; ++i) {
        var currentDivId= array[i];
        var currentDiv = document.getElementById(currentDivId);

        try {
            if (!currentDiv) {
                throw 'Div id not found: ' + currentDivId;
            }
            var image = document.createElement('img');
            image.src = 'img.jpg';
            image.onclick = function() {
                instance.doSomething(currentDivId);
            };

            currentDiv.appendChild(image);
        }
        catch(e) {
            console.warn('oops');
        }
    }
};

В этот код передается массив идентификаторов div.Что он делает, так это то, что он рендерит изображение в каждом из этих элементов div и устанавливает их свойство onclick.

Скажем, у меня есть массив строк: ['abc', 'xyz']

Я хочу, чтобы код поместил изображение внутри <div id="abc"></div>, а другое изображение внутри <div id="xyz"></div>.

КогдаЕсли щелкнуть первое изображение, необходимо вызвать функцию instance.doSomething с параметром 'abc' и наоборот.

Но код работает не так, как ожидалось.Он всегда вызывает instance.doSomething с последним параметром в массиве, в этом случае, 'xyz'.

Я новичок в JS и до сих пор не понимаю его внутреннюю работу.Что здесь не так и как я могу это исправить?

Любая помощь приветствуется.Спасибо.

Answer 1

image.onclick = function() {
    instance.doSomething(this.parentNode.id);
};

Это должно сделать это.Поскольку мы знаем, что изображение находится внутри элемента div, к которому мы хотим добраться, просто перейдите на один элемент dom вверх и получите его идентификатор.

Answer 2

Добро пожаловать в удивительный мир вопросов Javascript. В его нынешнем виде JS рассматривает ваш код onclick как что-то вроде «когда щелкают по этому объекту, извлекает значение, сохраненное в переменной currentDivID, в тот момент, когда происходит щелчок, и передает его в функцию doSomething».

То, что вы должны сделать, это основать аргумент на самом объекте изображения. Каждый объект DOM знает, где он находится в дереве DOM, поэтому в момент нажатия на него код onclick должен использовать операции обхода DOM, чтобы выяснить, в каком div он находится внутри, и динамически извлечь его ID. Таким образом, вам не нужно беспокоиться о привязке переменных и проблем с областями видимости ... просто выясните, какой div содержит ваше изображение, и получите идентификатор во время выполнения.

Answer 3

Попробуйте:

image.onclick = (function() {
  var currentD = currentDivId;
  return function() { 
      instance.doSomething(currentD);
  }
})();

Надеюсь, это поможет