开发2048复刻项目时，棋盘生成函数未在.grid容器内添加div元素如何解决

算力阿峰

2026-11-12

2048棋盘生成失败修复方案

核心错误：事件名拼写错误

你当前绑定的事件为DOMContentLoader，属于拼写错误，浏览器原生的DOM解析完成事件是DOMContentLoaded（末尾无r）。事件名不匹配会导致整个回调函数永远不会被触发，所有棋盘生成逻辑完全没有运行。

潜在隐患：未声明的全局变量

循环内创建的square变量没有使用let/const声明，会自动挂载为全局变量，后续开发中如果出现同名变量会引发不可预期的逻辑错乱。

修正后完整JS代码

document.addEventListener('DOMContentLoaded',() => {
    const table = document.querySelector(".grid");
    const scoreboard = document.getElementById("score");
    const resultDisplay = document.getElementById("result");
    const width = 4;

    function gameBoard(){
        let squares = [];
        for(let i=0; i < width*width; i++){
            // 新增let声明避免全局污染
            let square = document.createElement("div");
            square.innerHTML = 0;
            table.appendChild(square);    
            squares.push(square);
        }
        // 返回方块数组，方便后续逻辑调用
        return squares;
    }
    // 如需后续操作方块数组，可保存调用结果：const allSquares = gameBoard();
    gameBoard();
});