Невозможно назначить позицию offsetTop

Question

У меня есть элемент div «y» и класс изображений, называемый «рельеф». Приведенный ниже код предназначен так, что всякий раз, когда щелкнут элемент класса, y и этот элемент разделяют верхнюю и левую позиции.
Однако, похоже, что это не работает. Каково решение?

var lands = document.getElementsByClassName("terrain"); 
for(var i = 0; i < lands.length; i++){ 
    lands[i].onclick = function(){ 
     y.style.left = lands[i].offsetLeft; 
     y.style.top = lands[i].offsetTop; 
    }; 
} 

Answer 1

Вы должны использовать IIFE так, что currentely итерация «местность» устанавливает свои свойства (offsetLeft, offsetTop) к у, когда его щелкнул.

Надеется, что это помогает:

var lands = document.getElementsByClassName('terrain'); 
for (var i = 0; i < lands.length; i++) { 
    (function (land) { 
    land.onclick = function() { 
     alert('left: '+land.offsetLeft+' top: '+land.offsetTop); 
     y.style.left = land.offsetLeft + 'px'; 
     y.style.top = land.offsetTop + 'px'; 
    }; 
    }) (lands[i]); 
} 

Answer 2

Петля for портит закрытия у вас есть (Название переменной i внутри обработчика щелчка будет иметь такое же значение для всех lands, когда один из них нажали, значение i будет lands.length, которое является неопределенным значением). Это происходит потому, что объем for остается неизменным до конца. Для каждого элемента массива lands требуется что-то другое. forEach может достигнуть того, как это:

var lands = document.getElementsByClassName("terrain"); 
Array.prototype.forEach.call(lands, function(land) { 
    land.onclick = function(){ 
     y.style.left = land.offsetLeft; 
     y.style.top = land.offsetTop; 
    }; 
}); 

С lands (результат getElementsByClassName) является массив как объект но не массив, forEach не определен, поэтому мы должны назвать это так : Array.prototype.forEach.call. Узнайте больше о: forEach, closure и call.