Javascript 无法将位置分配给offsetTop

我有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;
    };
}

var lands=document.getElementsByClassName（“地形”）；
对于（变量i=0；i

必须使用，以便当前迭代的“地形”在单击时将其属性（offsetLeft、offsetTop）设置为y

希望这有助于：

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]);
}

var lands=document.getElementsByClassName（'terrain'）；
对于（变量i=0；i

for循环的

会弄乱您的闭包（单击处理程序中的变量
i
对于所有
lands
具有相同的值。单击其中一个
i
时，
i
的值将为
lands.length
，这是一个未定义的值）。这是因为

的

范围一直保持不变，直到最后。您需要为
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
。阅读更多关于：、和的信息
 你看到警报了吗？如果是，单击处理程序工作，但我无法测试offsetLeft/offsetTop。我现在正在测试，我看到一个警报。其他值是否为“'left:34 top:57”？如果没有，则这些地形没有offsetLeft/offsetTop。警报仍然存在，但“y”的位置没有改变。