Javascript 为什么这个函数只返回数组的最后一个元素？

我有点困惑，为什么当单击任何

li.attack

时，此函数总是将

h1#attack

设置为

hero.attacks

-数组的第一个元素？我正在尝试将其设置为相应的

hero.atatcks

-元素的名称。我试过使用for循环和foreach以及循环外的索引集，它们在每次迭代中都在增加，但似乎什么都不起作用

Javascript:

var hero = {
    attacks: [{
        name: "atck1"
    }, {
        name: "atck2"
    }, {
        name: "atck3"
    }, {
        name: "atck4"
    }]
};
var attacks = document.getElementsByClassName("attack");
for (var i = 0; i < attacks.length; i++) {
    var atck = hero.attacks[i];
    attacks[i].addEventListener("click", function (event) {
        document.getElementById("attack").innerText = atck.name;
    })
}

var-hero={
攻击：[{
名称：“atck1”
}, {
名称：“atck2”
}, {
名称：“atck3”
}, {
名称：“atck4”
}]
};
var-attacks=document.getElementsByClassName（“攻击”）；
for（var i=0；i<0.length；i++）{
var atck=英雄攻击[i]；
攻击[i]。addEventListener（“单击”），函数（事件）{
document.getElementById（“攻击”）.innerText=atck.name；
})
}

HTML:

Atck1
Atck2
Atck3
Atck4

您的阵列

英雄。攻击由相同的项目组成，重复多次，这就是为什么每次都设置相同的项目。请尝试以下操作：

var hero = {
    attacks: [{
        name: "atck1"
    }, {
        name: "atck2"
    }, {
        name: "atck3"
    }, {
        name: "atck4"
    }]
};

天哪，我很笨，不管是谁，它还是不起作用。。。现在只使用最后一个。@Mobilpadde这里是一个可能的解决方案。@YauheniLeichanok哇，太好了！谢谢将其作为答案发布，我会接受：实际上，它总是返回最后一个，因为您的对象是引用类型的，但因为您的数组具有相同的项，所以您认为它是第一个：）我认为这可能是在循环中使用相同变量的典型情况。请看@YauheniLeichanok从我的代码中复制了一个打字错误/粘贴了它，不管是谁，它只是出于某种原因使用了最后一个？检查@jwatts1980发布的链接-它有一个很好的解释。@jwatts1980如果你将它作为答案发布，我会接受它…或者我应该删除我的问题吗？
var hero = {
    attacks: [{
        name: "atck1"
    }, {
        name: "atck2"
    }, {
        name: "atck3"
    }, {
        name: "atck4"
    }]
};