Javascript (html) - 使用 .src 使变量具有与 img 相同的值

Question

我正在创建一个显示图像的游戏，如果玩家点击图像，则会调用一个函数来更新统计数据（得分/正确答案/错误答案）。 我将图像存储在一个数组中，并在更新统计函数中将玩家的答案（选择的图像）与数组进行比较。 但是，无论正确与否，玩家的答案总是被归类为错误的，他们永远不会得到任何正确的答案。

请有人检查我的代码，看看他们是否能发现任何明显的错误。非常感谢。

function displayImgs () {
     for(i = 0; i < allCelebs.length; i++){
        document.getElementById("image"+i).src = fullList[i];
    }
}

function updateStats () {
    Answer = document.getElementById("image"+i); 
    var counter = 0;
    while (counter < selectedImages.length) {
        if (Answer==selectedImages[counter]) {
            score+=50;
            correctAnswers+=1;
        } else {
            score-=20;
            incorrectAnswers+=1;
        }
        counter++;
    }
}

以及我在 html 中生成图像的代码：

<script> 
for (count=0;count<16;count++) {
    document.write("<img id='image",count,"' src='blank.jpg' onClick='updateStats();'>"); 
}
</script> 

Answer 1

您没有在点击事件中获取正确的元素。您可以将生成器更改为此。注意传递给 updateStat 函数的附加参数。

    for (count=0;count<16;count++) {
        document.write("<img id='image",count,"' src='blank.jpg' onClick='updateStats(",count,");'>"); 
    }

然后您将获得点击哪个图像的参考

function updateStats (index) {
    Answer = document.getElementById("image"+index); 
    var counter = 0;
    while (counter < selectedImages.length) {
        if (Answer==selectedImages[counter]) {
            score+=50;
            correctAnswers+=1;
        } else {
            score-=20;
            incorrectAnswers+=1;
        }
        counter++;
    }
}