Javascript 循环显示按钮

我正在尝试创建一个循环，它将显示一些图像，并为每个图像添加一个事件侦听器，当单击该图像时，将为humanGoal分配适当的值。我有：

var humanGoal;

function displayPicker(round){
    for(var i = 0; i <= round; i++){
        document.write('<img src=img/die' + i + '.png id="' + 'picker' + i + '">');
        document.getElementById('picker'+i).addEventListener("click", function () {
            humanGoal = i;
            document.write('you picked ' + humanGoal );
        });
    }
}

var目标；
函数显示选择器（圆形）{
for（var i=0；i变量
humanGoal
将被每次
for
循环迭代所覆盖，并在最后保留
round
+1值。不同的单词-它将始终显示错误的索引

解决方案：对每个
img
元素应用相同的类，绑定
单击事件侦听器，并通过在
数组#forEach
函数中传递
i
变量来显示实际的
索引


函数显示选择器（圆形）{
对于（var i=0；i v.addEventListener（'click'，function（））{
log（`You picked${i}`）；
}));
}
displayPicker（5）；
查看问题的答案很简单，当您尝试使用值i分配人类目标时，循环已经在“轮数”值上迭代，这就是为什么您总是在单击函数中获得i===round

请参阅下面的代码片段



价值目标；
函数显示选择器（圆形）{
对于（var i=0；我尝试i.toString（）