Receiving the following error when trying to run the below code: Null value on line 9 due to appendChild. Is my code not reading the etch 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;
}
I am able to get my code to work in MDN playground earlier without adding external js or css files. Not sure what's going on here. I would appreciate any help. Beginner here.
I do not get the null error ether.
Like Yogi mentioned, if you want to see the created divs, you need to set the the width and height. Also, you are missing a "display: flex;" style for .row
style.css changes: