用JavaScript制作7×7棋盘：页面无显示问题排查

问题根源 #

1. 脚本执行时机错误：如果你的JS代码放在<head>标签中，执行时document.body还未被浏览器渲染完成，无法将创建的div元素添加到页面，导致页面空白。
2. 缺少布局样式：你仅设置了div的高度，但未定义宽度，且默认块级div会独占一行，49个div会垂直排列成49条极细的线条，视觉上几乎不可见。
3. 棋盘颜色逻辑偏差：当前按循环变量i的奇偶设置颜色，会导致所有行的颜色完全对齐，无法实现棋盘交错的视觉效果。

修复方案 #

1. 确保脚本在DOM加载完成后执行 #

将JS代码放在<body>标签的末尾，或者用DOMContentLoaded事件包裹代码，保证操作DOM时目标元素已存在。

2. 添加网格布局样式 #

使用CSS Grid布局可以快速实现7×7的棋盘排列，让49个div自动分成7列。

3. 修正棋盘颜色逻辑 #

根据每个格子的行号和列号判断颜色，当行号+列号为偶数时设为黑色，奇数时设为红色，实现交错效果。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<body>
  <script>
    // 创建49个棋盘格子
    for (let i = 0; i < 49; i++) {
      const div = document.createElement('div');
      document.body.appendChild(div);
      // 计算当前格子的行和列索引
      const row = Math.floor(i / 7);
      const col = i % 7;
      // 根据行+列的奇偶性添加颜色类
      if ((row + col) % 2 === 0) {
        div.classList.add('black');
      } else {
        div.classList.add('red');
      }
    }

    // 给body设置Grid布局，让格子自动排成7列
    document.body.style.display = 'grid';
    document.body.style.gridTemplateColumns = 'repeat(7, 60px)';
    document.body.style.gap = '0';

    // 设置格子基础样式
    const blackCells = document.getElementsByClassName('black');
    for (let cell of blackCells) {
      cell.style.width = '60px';
      cell.style.height = '60px';
      cell.style.backgroundColor = 'black';
    }

    const redCells = document.getElementsByClassName('red');
    for (let cell of redCells) {
      cell.style.width = '60px';
      cell.style.height = '60px';
      cell.style.backgroundColor = 'red';
    }
  </script>
</body>
</html>

额外优化建议 #

可以将样式剥离到CSS中，让代码结构更清晰、易维护：

body {
  display: grid;
  grid-template-columns: repeat(7, 60px);
  gap: 0;
}
.black {
  width: 60px;
  height: 60px;
  background-color: black;
}
.red {
  width: 60px;
  height: 60px;
  background-color: red;
}

此时JS代码仅需负责创建元素和添加类：

for (let i = 0; i < 49; i++) {
  const div = document.createElement('div');
  document.body.appendChild(div);
  const row = Math.floor(i / 7);
  const col = i % 7;
  div.classList.add((row + col) % 2 === 0 ? 'black' : 'red');
}

内容的提问来源于stack exchange，提问作者RetroGamer2.0