Estoy usando JavaScript para crear una pila de 16 cajas. No creo que tenga la función makeBox() en el lugar correcto.
let makeBox = function() { let box = document.createElement('div'); document.body.appendChild(box); box.style.width = '28px'; box.style.height = '28px'; box.style.border = '1px solid black'; return box; }; let makeGrid = function(numberOfRows) { let y = 0; let x = 0; while (y < numberOfRows) { x = 0; while (x < numberOfRows) { x = x + 1; } y = y + 1; } makeBox(); }; makeGrid(16);Solo obtengo una casilla en el navegador. Si alguien tiene alguna experiencia con esto, por favor si pudiera ayudar.
Si desea hacer una cuadrícula de cajas, CSS Grid puede ayudar. Ahorra esfuerzo en la creación de bucles anidados. Simplemente pase de 0 al número pasado cuando el argumento multiplicó ese mismo número y cree un cuadro en cada iteración. Luego agréguelo al elemento que se ha configurado para controlar la cuadrícula.
También usaría una clase para el cuadro también.
function makeBox(x) { const box = document.createElement('div'); box.classList.add('box'); box.textContent = x; return box; }; // The grid will be the argument (a number) // multiplied by that number again, so you just need // to loop from 0 to that number function makeGrid(n) { const grid = document.querySelector('#grid'); for (let x = 0; x < n * n; x++) { grid.appendChild(makeBox(x)); } }; makeGrid(16); #grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; } .box { width: 28px; height: 28px; border: 1px solid black; text-align: center; } <div id="grid"></div>