Я пытаюсь создать сетку 16x16 в JavaScript. Метод, который я пытаюсь использовать, - создать пустой HTML-код div
, а затем добавить к нему другие элементы 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;
}