能否通过event.target添加图片？7x7网格游戏图片不显示问题排查

我想要制作一款7x7网格的简易游戏，点击网格方块时从图片数组中选取随机图片放置，并实现匹配检测（类似四子棋）。

已完成的基础工作：

1. 通过HTML构建7x7网格结构：

<div class="grid">
      <div class="square" id="1"></div>
      <div class="square" id="2"></div>
      <...............................>
      <div class="square" id="49"></div>
</div>

2. 在app.js中定义图片数组与基础变量：

document.addEventListener("DOMContentLoaded", () => {
    const squares = document.querySelectorAll(".square")
    const scoreDisplay = document.getElementById("result")
    let score = 0;
    squares[24].style.backgroundImage = "url('res/middle.png')"
    const cards = [
        {
            name: 'blue',
            img: 'res/blue.png'
        }, 
         {
            name: 'yellow',
            img: 'res/yellow.png'
        }, 
        {
            name: 'red',
            img: 'res/red.png'
        }, 
        {
            name: 'orange',
            img: 'res/orange.png'
        }, 
        {
            name: 'green',
            img: 'res/green.png'
        }, 
        {
            name: 'pink',
            img: 'res/pink.png'
        }, 
        {
            name: 'ivory',
            img: 'res/ivory.png'
        }, 
    ]

当前问题：
点击逻辑中分数可正常更新，控制台无报错，但随机图片无法显示，点击逻辑代码如下：

let randomCard = Math.floor(Math.random() * cards.length)
   

//    clickedPosition = ?

   squares.forEach(square => {
        square.addEventListener('click', function(e) {
            if(square.id !== squares[24] ) {
                score ++;
                scoreDisplay.textContent = score
                e.target.style.backgroundImage = randomCard.img
                

            } else {

            }
        })
   })

})

疑问：能否通过event.target添加图片？该如何解决图片不显示的问题？

1. 关于event.target的可行性 #

完全可以通过event.target设置背景图片，这个方法本身没有问题，图片不显示是代码逻辑错误导致的。

2. 核心问题与修复步骤 #

问题1：随机卡片获取逻辑错误

Math.floor(Math.random() * cards.length)得到的是数组的索引值（0-6的整数），你直接用randomCard.img相当于拿数字去访问属性，结果是undefined，自然无法显示图片。
修复：从数组中取出对应元素：

// 正确获取随机卡片对象
const randomCard = cards[Math.floor(Math.random() * cards.length)]

问题2：随机值仅初始化一次

你把randomCard定义在事件监听外部，页面加载时就生成了唯一值，后续所有点击都会用同一张图。要实现每次点击随机选图，需要把随机值生成逻辑放到点击事件内部。

问题3：中间方块的判断逻辑错误

square.id !== squares[24]是拿字符串类型的id和DOM元素对比，永远为true，导致中间方块也能被修改。正确写法是对比id值：

if(square.id !== squares[24].id)

3. 修复后的完整点击逻辑 #

squares.forEach(square => {
    square.addEventListener('click', function(e) {
        if(square.id !== squares[24].id) {
            score ++;
            scoreDisplay.textContent = score;
            // 每次点击重新生成随机卡片
            const randomCard = cards[Math.floor(Math.random() * cards.length)];
            // 用url()包裹路径，和中间图的设置格式一致
            e.target.style.backgroundImage = `url('${randomCard.img}')`;
        }
    })
})

4. 额外优化建议 #

• 给.square类添加固定宽高和background-size: cover样式，确保图片能填满方块
• 后续实现匹配检测时，可以给方块添加dataset.name存储当前图片的名称，方便后续判断连续相同的图片

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