在 Chrome 控制台中不断收到错误消息 - GET 404（未找到）

Question

我正在尝试创建一个小型记忆卡游戏作为初学者项目。

页面结构+目标：

• 一共有6张卡片和2个按钮。
• 目标：如果你点击重置按钮，它应该改变图像的 src。

问题：

• 当您单击重置按钮时，有时交换的 img 会消失，并在 Chrome 的开发工具/控制台中出现以下错误：GET http://127.0.0.1:5500/Szorgalmi/Projects/undefined 404 (Not Found )
• 点击报错时，可以看到如下内容： Image (async) [email protected]:32

** 这是我在 JS 文件中的第 32 行的样子，具有以下功能：**

let resetButton = document.querySelector('reset');
function RandomizeSrcOfImages() {
    /* let revealAllImg = document.querySelectorAll('.images');
     for (let i = 0; i < revealAllImg.length; i++) {
         revealAllImg[i].style.display = "block";
     }*/
    let allImage = new Array();
    allImage[1] = "elephant.png";
    allImage[2] = "octopus.png";
    allImage[3] = "melon.png";

    let randomImage = Math.floor(Math.random() * allImage.length);
    document.querySelector('#img1').src = allImage[randomImage];
    document.querySelector('#img3').src = allImage[randomImage];
}

reset.addEventListener('click', RandomizeSrcOfImages);

到目前为止我尝试了什么：

• 将所有文件重新定位到不同的文件夹
• 在 HTML 中添加了脚本类型 = "text/javascript"
• 一堆谷歌搜索

注意：此错误并非始终发生。我不知道为什么，但有时当点击重置按钮时它会完成工作，有时会弹出错误。

我查了几个stackoverflow的帖子，从昨天开始在谷歌上搜索，仍然没有找到解决方案。

Answer 1

Javascript 数组是基于索引 0 的。您的数组长度为 4，但第一个条目

allImage[0]

未定义，这导致观察到的行为。将您的三张图片放在索引 0、1 和 2 处。