如何使用div创建网格

有人能告诉我我的代码出了什么问题吗？我正在尝试使用div创建一个网格。这就是我目前所拥有的，我不确定为什么它没有创建网格。我已经在谷歌上搜索了很多次了，我不知道为什么它不起作用。新的编码，所以任何帮助都将不胜感激。

const container = document.querySelector('.container')
function makeGrid();
for (i = 0, i < 16, i++); {
const row = document.createElement("div")
container.document.body.appendChild(row);
row.textContent = i;
for (j = 0, j < 16, j++); {
const col = document.getElementById('div');
container.document.body.appendChild(col);
col.textContent = j;
}
row.appendChild(col)
container.appendChild(row)

}
makeGrid();

html,
body {
height: 100%;
width: 100%;
}
body {
display: grid;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-columns: repeat(3, auto);
}
.container {
width: 20px;
height: 20px;
text-align: center;
border: 1px solid blue;
background-color: pink;
display: inline-block;
float: left;
}

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Etch-a-Sketch TOP Project</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="container"></div>
</body>
</html>

这里有一个简单的工作解决方案，可以用作参考

const container = document.querySelector(".container");
function makeGrid() {
for (i = 0; i < 16; i++) {
for (j = 0; j < 16; j++) {
const row = document.createElement("div");
container.appendChild(row);
row.textContent = `${i},${j}`
}
}
}
makeGrid();

html,
body {
height: 100%;
width: 100%;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
}
.container div{
width: 30px;
height: 30px;
border: 1px solid blue;
background-color: pink;
}

您的代码在语法和逻辑方面存在一些问题。

循环的

应该有一个分号而不是逗号，/li>

for (i = 0, i < 16, i++)

应该是

for (i = 0; i < 16; i++)

如果添加分号，则不会执行

for循环；最后

for (i = 0; i < 16; i++); {
// repetitive code
}

由于使用分号，将不起作用。要使其工作，您需要删除；像这个

for (i = 0; i < 16; i++) {
// repetitive code
}

获取col的原因并不明显，但下面的方法是不正确的

const col = document.getElementById('div');

div不是一个ID，而是一个HTML标记。所以你可以用代替上面的语句

const col = document.getElementsByTagsName('div');

CSS网格可以应用于.contain而不是body中，因为您的网格将填充在.contain中，而不是body

您编写的javascript函数是错误的。我修改了你的几行代码。试试这个吧。！

const container = document.querySelector(".container");
function makeGrid() {
for (i = 0; i < 16; i++) {
const row = document.createElement("div");
row.className = "row";
container.appendChild(row);
row.textContent = i;
for (j = 0; j < 16; j++) {
const col = document.createElement("div");
col.className = "col";
row.appendChild(col);
col.textContent = j;
}
}
}
makeGrid();

html,
body {
height: 100%;
width: 100%;
}
body {
display: grid;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-columns: repeat(3, auto);
}
.container div {
width: 20px;
height: 20px;
text-align: center;
border: 1px solid blue;
background-color: pink;
display: inline-block;
float: left;
}

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Etch-a-Sketch TOP Project</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="container"></div>
</body>
</html>

当您定义一个不需要的函数;时。所以它应该像这个function makeGrid(){ ... }

相关内容

最新更新

热门标签：