vca*_*ble 15 html javascript css
我正在尝试用JavaScript创建一个16x16的网格。我尝试使用的方法是div在HTML中创建一个空白，然后将其他div附加到其上，并勾勒出边框。我似乎无法完成这项工作，并且将我的代码放在下面。
HTML：
<!DOCTYPE html>
<head>
<title>Etch-a-Sketch</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
JavaScript：
// Sets important constants and variables
const container = document.getElementById("container");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");
// Creates a default grid sized 16x16
function defaultGrid() {
makeRows(16);
makeColumns(16);
}
// Takes (rows, columns) input and makes a grid
function makeRows(rowNum) {
// Creates rows
for (r = 0; r < rowNum; r++) {
let row = document.createElement("div");
container.appendChild(row).className = "gridRow";
};
};
// Creates columns
function makeColumns(cellNum) {
for (i = 0; i < rows.length; i++) {
for (j = 0; j < cellNum; j++) {
let newCell = document.createElement("div");
rows[j].appendChild(newCell).className = "cell";
};
};
};
CSS：
.gridRow {
border: 1px solid black;
}
.cell {
border: 1px solid black;
}
Nid*_*eph 22
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
cell.innerText = (c + 1);
container.appendChild(cell).className = "grid-item";
};
};
makeRows(16, 16);:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 1em;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1em;
border: 1px solid #ddd;
text-align: center;
}<div id="container">
</div>尝试
let n=16, s='';
for(let i=0; i<n; i++) {
s+= '<div class="row">'
for(let j=0; j<n; j++) s+= `<div class="cell"> ${(i*n+j).toString(16)} </div>`;
s+= '</div>'
}
container.innerHTML = s;.row { display: flex; font-size: 9.5px; text-align: center; color: red }
.cell { width: 10px; height: 10px; margin: 1px; border: 1px solid black;}<div id="container"></div>