技术求助：使用div创建网格的代码无法运行，求排查问题

原代码的核心问题： #

• JS语法错误：
  • 函数定义function makeGrid();末尾多了分号，正确写法是function makeGrid() { ... }
  • for循环分隔符误用逗号（,），必须用分号（;）；循环末尾的分号会导致后续代码块不执行
  • 变量i和j未声明，会变成全局变量，应使用let或const
• DOM操作错误：
  • 错误调用container.document.body.appendChild，应直接使用container.appendChild()或row.appendChild()
  • 用document.getElementById('div')获取不存在的元素，需改用document.createElement('div')创建新元素
  • 内层循环的col变量在循环外访问，会导致仅能获取最后一个列元素
• CSS布局冲突：
  • body设置grid布局，但container同时使用inline-block+float，布局逻辑混乱
  • container固定20px尺寸，无法容纳网格内容
• HTML加载顺序问题：
  • script放在container元素之前，执行时DOM未加载完成，document.querySelector('.container')会返回null

修复后的完整代码： #

HTML（调整script位置）

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Etch-a-Sketch TOP Project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container"></div>
  <!-- 把script放在container之后，确保DOM加载完成 -->
  <script src="script.js"></script>
</body>
</html>

JS（修正语法与DOM操作）

const container = document.querySelector('.container');

function makeGrid() {
  // 声明变量避免全局污染
  for (let i = 0; i < 16; i++) {
    const row = document.createElement('div');
    row.classList.add('grid-row'); // 给行添加类名方便样式控制
    
    for (let j = 0; j < 16; j++) {
      const col = document.createElement('div');
      col.classList.add('grid-col'); // 给列添加类名
      col.textContent = `${i},${j}`; // 显示行列坐标
      row.appendChild(col); // 把列添加到行里
    }
    
    container.appendChild(row); // 把行添加到容器里
  }
}

makeGrid();

CSS（改用grid布局实现网格）

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(16, 20px); /* 16列，每列20px */
  grid-template-rows: repeat(16, 20px); /* 16行，每行20px */
  gap: 1px; /* 网格间隙 */
  border: 1px solid #000;
}

.grid-col {
  background-color: pink;
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}

关键说明： #

1. JS部分：严格遵循语法规范，确保循环逻辑正确，DOM元素创建和挂载顺序无误
2. CSS部分：用容器的grid布局直接生成16x16网格，避免float和inline-block的布局冲突
3. HTML部分：调整script位置保证DOM加载完成后再执行JS代码

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