函数在浏览器上不输出Javascript中的框堆栈

Question

我使用JavaScript创建一个16个盒子的堆栈。我想我没有把makeBox()函数放在正确的位置。

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);

我只是在浏览器中得到一个框。如果有人有任何经验，如果他们可以帮助。

Answer 1

如果你想做一个框的网格CSS网格可以帮助。它节省了创建嵌套循环的工作量。只需从0循环到传入的参数乘以相同的数字，并在每次迭代中创建一个框。然后将其添加到已经设置的控制网格的元素中。

我也会为box使用一个类。

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>