开发Etch a Sketch游戏时JavaScript无法注入div生成网格

你的代码有两个核心问题导致div无法注入：

• 脚本执行时机不对：你把JS引用放在了<head>标签内，浏览器加载执行JS时，页面下方的<div id="container">还未被解析到DOM树中，此时document.getElementById('container')获取到的是null，后续执行appendChild会直接抛出错误，无法完成元素插入。
• 循环边界错误：循环条件写为i <= gridNumber * gridNumber时，会比预期多生成1个div（传入16时会生成257个格子，而非预期的256个）。

1. 调整脚本加载位置 #

把<script src="app.js"></script>从<head>标签移到<body>的闭合标签前，保证JS执行时所有DOM元素已经加载完成。
修正后的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-a-Sketch</title>
    <link rel = "stylesheet" href="style.css">
</head>
<body>
<div class="banner"> 
    <div class="banner-text"> 
        <h1> Etch-a-Sketch </h1>
    </div>
</div>
<div id="container"> </div>
<!-- 脚本移到所有DOM元素之后 -->
<script src="app.js"> </script>
</body>
</html>

2. 修正JS循环条件 #

把循环的判断条件从<=改为<，避免多生成冗余格子，修正后的JS代码：

let container = document.getElementById('container');

function getGrid(gridNumber) { 
for (let i = 0; i < gridNumber * gridNumber; i++) 
{
    const row = document.createElement('div');
    row.style.border = '1px solid red'
    container.appendChild(row).classList.add('box');
}
}

getGrid(16);

补充布局样式（可选） #

当前生成的div没有设置宽高和布局规则，会默认纵向排列占满整行，你可以在style.css中添加如下样式实现规整的网格效果：

#container {
  display: flex;
  flex-wrap: wrap;
  width: 480px;
}
.box {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

调整后打开页面就能看到16*16的红色边框网格正常渲染了。

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