Chrome控制台GET 404错误求助：记忆卡游戏重置按钮图片加载异常

问题描述 #

开发小型记忆卡牌游戏，页面包含6张卡牌与2个按钮，需求为点击重置按钮时更换图片的src属性。但偶尔点击会导致图片消失，Chrome控制台报404错误：GET http://127.0.0.1:5500/Szorgalmi/Projects/undefined 404 (Not Found)，错误指向RandomizeSrcOfImages函数。

错误代码 #

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

错误原因 #

1. 数组索引无效：用new Array()创建数组后直接给索引1、2、3赋值，此时数组长度为4（索引0到3），但索引0的值是undefined。Math.random() * allImage.length会生成0~4之间的随机数，取整后可能得到0，这时allImage[0]为undefined，导致图片src被设为undefined，浏览器会请求当前路径下的undefined文件，触发404。
2. 按钮选择器与变量名不匹配：document.querySelector('reset')未加#，无法选中id为reset的按钮；后续用reset.addEventListener绑定事件，但变量名是resetButton，存在引用错误。

修复方案 #

1. 修正数组初始化方式 #

用数组字面量直接定义有效路径，避免出现undefined索引：

let allImage = ["elephant.png", "octopus.png", "melon.png"];

2. 修正按钮选择器与事件绑定 #

确保选中正确的按钮元素，且变量名统一：

let resetButton = document.querySelector('#reset');
// ...
resetButton.addEventListener('click', RandomizeSrcOfImages);

完整修复后代码 #

let resetButton = document.querySelector('#reset');

function RandomizeSrcOfImages() {
    let allImage = ["elephant.png", "octopus.png", "melon.png"];
    
    let randomIndex = Math.floor(Math.random() * allImage.length);
    document.querySelector('#img1').src = allImage[randomIndex];
    document.querySelector('#img3').src = allImage[randomIndex];
}

resetButton.addEventListener('click', RandomizeSrcOfImages);

修复说明 #

• 数组字面量初始化后，所有索引对应的值都是有效的图片路径，随机取值时不会出现undefined，彻底解决404问题。
• 按钮选择器添加#后能正确选中id为reset的按钮，变量名统一避免了事件绑定的引用错误。

内容的提问来源于stack exchange，提问作者Beca_1923