JS事件触发后如何修改div的background-image？style空值报错如何解决

云原生阿岚

2026-10-20

报错原因排查

DOM选择器不匹配：HTML中的grid元素仅设置了class="grid"，未设置id="grid"，调用document.getElementById("grid")会返回null，访问null的style属性就触发了TypeError
脚本加载时机错误：你的script标签放在head标签内，页面DOM还没渲染完成就执行了app.js的代码，document.querySelector('.grid')也可能返回null
if判断逻辑错误：判断条件写的是赋值语句isGamerOver = true，不是相等判断，且当前逻辑和你要的「游戏结束切换结束背景」需求完全相反
冗余DOM查询：你已经提前通过document.querySelector('.grid')获取了grid变量，不需要再调用getElementById重复查询DOM

修复方案

1. 修改HTML结构

把script标签移到body结束标签之前，确保DOM加载完成再执行JS，同时修正link单标签的错误写法：

<!DOCTYPE html>
<html lang="en"  dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>100% Not Doodle Jump</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid"></div>
    <script src="app.js" charset="utf-8"></script>
</body>
</html>

2. 重写gameOver函数

直接用已有的grid变量修改样式，修正判断逻辑：

function gameOver() {
    console.log('game over')
    isGamerOver = true
    while (grid.firstChild) {
        grid.removeChild(grid.firstChild)
    }
    grid.innerHTML = score
   
    clearInterval(upTimerId)
    clearInterval(downTimerId)
    clearInterval(leftTimerId)
    clearInterval(rightTimerId)
   
    // 游戏结束时加载结束背景
    if(isGamerOver === true){
        grid.style.backgroundImage = "url('backgrounds/game-over.png')";
    }else{
        grid.style.backgroundImage = "url('backgrounds/background-up.png')";
    }
}

可选优化