Menu
I'm trying to create a 16x16 grid in JavaScript. The method I'm trying to use is to create an empty div in HTML, and then append other divs to it, and outline their borders. I can't seem to make this work, and I've put my code below.
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; } 
932
JavaScript Grid, also known as the JavaScript DataGrid, is a feature-rich control for displaying data in a tabular format. Its wide range of functionalities includes data binding, editing, Excel-like filtering, custom sorting, aggregating rows, selection, and support for Excel, CSV, and PDF formats.
It would be much cleaner to use CSS variables and CSS grid to create dynamic rows and columns.
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>Try
let i=0, n=16; container.innerHTML = `<div class="row">${'<div class="cell">X</div>'.repeat(n)}</div>` .repeat(n).replace(/X/g,_=> (i++).toString(n) ).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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
