JavaScript获取选中图片name值及记忆游戏404错误求助

我正在开发一款记忆游戏，目前点击图片时能在控制台显示该图片的name值，但无法为ImageURL变量获取图片的name值，且运行代码时出现404未找到错误。

原始代码 #

JavaScript代码 #

const myCardSet = ["duck", "kitten", "piglet", "puppy", "calf", "veal", "lamb", "rooster", "horse", "mouse", "dog", "cat", "goose", "goat", "sheep", "pig", "cow", "chick", "hen"];

document.addEventListener('onload', function () {
    populatieField()
})

class card {
    constructor(card1) {
        this.card1 = myCardSet[0]
    }
}

function populateField() {
    for (let i = 0; i < myCardSet.length; i++) {
        let newTile = document.createElement('div');
        let newCard = document.createElement('img');
        let imageURL = document.getElementById('field').getElementsByTagName('img')
        for (let i of imageURL) {
            let ImageSrc = i.getAttribute('name')
            console.log(ImageSrc.substring(ImageSrc.lastIndexOf('/') + 1))
        }
        newCard.setAttribute('src', imageURL)
        newCard.setAttribute('name', imageURL)
        newTile.appendChild(newCard)
        myField.appendChild(newTile)
        let img = {
            src: 'cover.png',
            class: '.covered'
        }
    }
}

const myField = document.getElementById('field')
myField.addEventListener('click', function onClickCard(e) {
    this.getAttribute(e.target.name)
    console.log(e.target.name)
}
)

function shuffle(arr) {
    var i = arr.length, j, temp;
    while (--i > 0) {
        j = Math.floor(Math.random() * (i + 1))
        temp = arr[j];
        arr[j] = arr[i]
        arr[i] = temp
    }
}

shuffle(myCardSet)
populateField()

HTML代码 #

<body>

    <div id="field"><img src="../begin/img/calf.jpg" alt="" name="calf">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
    </div>

    <script src="js/memory.js" type="module"></script>
</body>

问题分析与修复方案 #

1. 404错误修复 #

• 原代码中populateField函数错误地将imageURL（一个HTMLCollection元素集合）直接赋值给图片的src属性，导致浏览器加载无效URL触发404。
• 同时HTML中手动编写了大量重复图片标签，与JS动态创建逻辑冲突，需移除手动添加的图片，只保留空的容器。

2. 图片name值获取修复 #

• 原代码读取已有图片name的逻辑完全错误，应在动态创建卡片时直接基于myCardSet的名称设置name属性，确保点击时能正确获取。

修正后的完整代码 #

JavaScript代码 #

const myCardSet = ["duck", "kitten", "piglet", "puppy", "calf", "veal", "lamb", "rooster", "horse", "mouse", "dog", "cat", "goose", "goat", "sheep", "pig", "cow", "chick", "hen"];
// 复制数组实现卡片配对（记忆游戏核心需求）
const pairedCardSet = [...myCardSet, ...myCardSet];

// 改用DOMContentLoaded确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
    shuffle(pairedCardSet);
    populateField();
})

function populateField() {
    const myField = document.getElementById('field');
    for (let cardName of pairedCardSet) {
        let newTile = document.createElement('div');
        let newCard = document.createElement('img');
        // 拼接正确的图片路径
        const originalSrc = `../begin/img/${cardName}.jpg`;
        // 初始显示封面图
        newCard.src = 'cover.png';
        newCard.setAttribute('name', cardName);
        // 存储原图路径用于切换
        newCard.dataset.originalSrc = originalSrc;
        newCard.classList.add('covered');
        
        newTile.appendChild(newCard);
        myField.appendChild(newTile);
    }
}

const myField = document.getElementById('field')
myField.addEventListener('click', function onClickCard(e) {
    // 确保点击目标是图片元素
    if (e.target.tagName === 'IMG') {
        console.log(e.target.name);
        // 切换封面/原图显示
        if (e.target.classList.contains('covered')) {
            e.target.src = e.target.dataset.originalSrc;
            e.target.classList.remove('covered');
        } else {
            e.target.src = 'cover.png';
            e.target.classList.add('covered');
        }
    }
})

function shuffle(arr) {
    let i = arr.length, j, temp;
    while (--i > 0) {
        j = Math.floor(Math.random() * (i + 1))
        temp = arr[j];
        arr[j] = arr[i];
        arr[i] = temp;
    }
}

HTML代码 #

<body>
    <div id="field"></div>
    <script src="js/memory.js"></script>
</body>

额外优化说明 #

• 移除了无用的card类（原代码未实际使用）
• 实现了记忆游戏必需的卡片配对逻辑
• 添加了封面图切换的基础交互
• 修复了事件监听的错误（原onload事件无法正确触发）

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