Etch-a-sketch游戏页面无显示问题排查求助

你的代码存在几个关键问题，导致页面加载后无任何内容显示，逐一排查并修复如下：

核心问题点 #

• 未初始化网格生成：定义了makeGrid()函数但从未调用，容器#container没有生成任何网格项，自然看不到内容
• 按钮创建逻辑错误：createButton()被放在网格项的循环内，会生成成百上千个重复按钮，且初始加载时因未调用makeGrid()连按钮都不会出现
• DOM选择器语法错误：重置逻辑里的类选择器漏了.，且querySelectorAll与forEach的语法结构混乱
• 未声明循环变量：for循环里的c未用let/const声明，会成为全局变量引发潜在问题
• 输入边界处理缺失：未处理用户取消输入或输入非数字的情况，会导致后续逻辑出错

修正后的JavaScript代码 #

const container = document.getElementById("container");

function makeGrid(rows, cols) {
  // 移除已有按钮
  while(document.querySelector("button") !== null) {
    document.querySelector("button").remove();
  }

  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  container.style.width = "960px";
  container.style.overflow = "hidden";

  // 声明循环变量c，避免全局污染
  for (let c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    cell.style.minHeight ="0";
    cell.style.minWidth = "0";
    cell.style.overflow = "hidden";
    container.appendChild(cell).className = "grid-item";
    cell.addEventListener("mouseover", () => {
      cell.style.backgroundColor = "black";
    });
  }
  // 循环外创建按钮，仅生成一次
  createButton();
};

function createButton() {
  const butonDiv = document.querySelector("#buttonDIV");
  const resetButton = document.createElement("button");
  resetButton.textContent = "reset grid!";
  resetButton.style.margin = "20px";
  butonDiv.appendChild(resetButton);

  resetButton.addEventListener('click', () => {
    // 修正选择器和语法错误
    document.querySelectorAll(".grid-item").forEach(e => e.remove());

    let userGridinput = prompt("Please enter the number of grid squares(Max 100)");
    // 处理取消输入或非数字的情况
    if (!userGridinput || isNaN(userGridinput)) {
      alert("请输入有效的数字！");
      return;
    }
    userGridinput = Number(userGridinput);
    if(userGridinput > 100){
      alert("ERROR!Your grid size cannot be bigger than 100!");
      return;
    }
    makeGrid(userGridinput, userGridinput);
  });
};

// 初始调用生成默认网格（示例为16x16）
makeGrid(16, 16);

内容的提问来源于stack exchange，提问作者Victor Mihail Galeriu