Estoy tratando de crear una cuadrícula de 16x16 en JavaScript. El método que estoy tratando de usar es crear un div vacío en HTML, y luego agregarle otros divs y delinear sus bordes. Parece que no puedo hacer que esto funcione, y he puesto mi código a continuación.
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; }La solución, según lo brinda Gerardo Furtado, es cambiar el CSS.
CSS antiguo:
.gridRow { border: 1px solid black; } .cell { border: 1px solid black; }CSS fijo:
.cell { border: 1px solid gray; min-width: 10px; min-height: 20px; display: inline-block; }CÓDIGO HTML
<html> <head> <link rel=stylesheet type="text/css" href="Project_Javascript_jQuery.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="Project_Javascript_jQuery.js"></script> </head> <body> <h4><a href="http://www.theodinproject.com/home">The Odin Project</a> >> <a href="http://www.theodinproject.com/web-development-101">Web Development 101</a> >> <a href="http://www.theodinproject.com/web-development-101#section-the-front-end">The Front End</a> >> <a href="http://www.theodinproject.com/web-development-101/javascript-and-jquery">Project: JavaScript and jQuery</a> >> Nick Kessler entry February 6, 2015</h4> <center><button class="newGrid">New Grid</button></center> <div id="container"></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"); }); }); });Sería mucho más limpio usar variables CSS y cuadrícula CSS para crear filas y columnas dinámicas.
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>Tratar
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>