尝试运行以下代码时收到以下错误：由于appendChild，第9行出现空值。我的代码没有读取蚀刻 ID 吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src ="script.js" defer></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="etch"></div>
</body>
</html>
let num = 16;
let etch = document.getElementById("etch");
function board () {
for(let i = 0; i < num; i++) {
let row = document.createElement("div");
row.classList.add("row");
etch.appendChild(row);
for(let j = 0; j < num; j++) {
let column = document.createElement("div");
column.classList.add("column");
row.appendChild(column);
}
}
}
board();
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#etch{
margin: 27px;
display: flex;
flex-direction: column;
width: 500px;
height: 500px;
border: black 2px solid;
}
.column{
display: flex;
flex-grow: 1;
background-color: silver;
}
.row{
flex-grow: 1;
border: white 1px solid;
}
我能够让我的代码更早地在 MDN Playground 中运行，而无需添加外部 js 或 css 文件。不知道这里发生了什么。我将不胜感激任何帮助。初学者在这里
我没有收到空错误以太。
就像Yogi提到的，如果你想看到创建的div，你需要设置宽度和高度。 另外，您还缺少“display: flex;” .row 的样式
style.css 更改：
.column{
display: flex;
flex-grow: 1;
background-color: silver;
/* RWWJ */
min-width: 64px;
min-height: 64px;
border: white 1px solid;
}
.row{
flex-grow: 1;
border: white 1px solid;
/* RWWJ */
display: flex;
}