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> </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; } 4 Answers
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> </div>Try
let i=0, n=16; container.innerHTML = `<div>${'<div>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></div>The solution, as provided by Gerardo Furtado is to change the CSS.
Old CSS:
.gridRow { border: 1px solid black; } .cell { border: 1px solid black; } Fixed CSS:
.cell { border: 1px solid gray; min-width: 10px; min-height: 20px; display: inline-block; } HTML CODE
<html> <head> <link rel=stylesheet type="text/css" href="Project_Javascript_jQuery.css"> <script type="text/javascript" src=""></script> <script type="text/javascript" src="Project_Javascript_jQuery.js"></script> </head> <body> <h4><a href="">The Odin Project</a> >> <a href="">Web Development 101</a> >> <a href="">The Front End</a> >> <a href="">Project: JavaScript and jQuery</a> >> Nick Kessler entry February 6, 2015</h4> <center><button>New Grid</button></center> <div></div> <br><br> </body> </html> CSS
#container { position: relative; top: 30px; outline: 2px solid #000; font-size: 0; margin: auto; height: 960px; width: 960px; padding: 0; border: none; } .grid { margin: 0; padding: 0; border: none; outline: 1px solid #000; display: inline-block; } JavaScript
// Function that builds a grid in the "container" function createGrid(x) { for (var rows = 0; rows < x; rows++) { for (var columns = 0; columns < x; columns++) { $("#container").append("<div class='grid'></div>"); }; }; $(".grid").width(960/x); $(".grid").height(960/x); }; // Function that clears the grid function clearGrid(){ $(".grid").remove(); }; // Function that prompts the user to select the number of boxes in a new grid // the function then also creates that new grid function refreshGrid(){ var z = prompt("How many boxes per side?"); clearGrid(); createGrid(z); }; // Create a 16x16 grid when the page loads. // Creates a hover effect that changes the color of a square to black when the mouse passes over it, leaving a (pixel) trail through the grid // allows the click of a button to prompt the user to create a new grid $(document).ready(function() { createGrid(16); $(".grid").mouseover(function() { $(this).css("background-color", "black"); }); $(".newGrid").click(function() { refreshGrid(); $(".grid").mouseover(function() { $(this).css("background-color", "black"); }); }); }); 
