如何使我的for循环在使用重置后继续

我只是需要一些指导。我感到有点失落，为什么我的for循环停止了。这是一款简单的蚀刻素描游戏，在重置之前的for循环会做出反应，但在创建新网格之后，它就不再加载了。我不知道下一步该做什么。我想要一些指导，如果你确实修复了代码，请给我一个解释或一些资源，我可以参考，这样我就能理解自己。

下面是我的代码:

//first div
let container = document.createElement('div')
container.setAttribute('id', 'container');
container.classList.add("grid");
document.body.appendChild(container);

//second div
let containerGrid = document.createElement('div')
containerGrid.setAttribute('id', 'containerGrid');
containerGrid.classList.add("grids");
document.body.appendChild(containerGrid);
//button div
let buttonDiv = document.createElement('div')
buttonDiv.setAttribute('id', 'button');
buttonDiv.classList.add("button");
document.body.appendChild(buttonDiv);
//buttons
const startAgain = document.createElement('button');
startAgain.setAttribute('id', 'createbtn');
startAgain.style.padding = "10px";
startAgain.textContent ="New grid"
container.appendChild(startAgain);
//onclick events
const resetbtn = document.getElementById("resetDivs");
resetbtn.onclick = () => resetGrid()
createbtn.onclick = () => makeCols(); 
console.log(resetbtn);

//hover color event
function random (number) {
return Math.floor(Math.random() * (number +1));
}
function rainbowColor (e) {
const rndCol= 'rgb(' + random(255) + ',' + random(255) +',' + random(255) + ')';
e.target.style.backgroundColor = rndCol;
}
//grid function
function resetGrid () {
containerGrid.innerHTML =""
}
//make grid 16*16
function makeCols (col) {
for (let i = 0; i < 16*16; i++) {
const colDivs = document.createElement('div');
colDivs.setAttribute('id', 'col-row');
colDivs.classList.add('cols');
colDivs.textContent ="";
colDivs.style.border = ('solid');
colDivs.style.display= ('grid');
colDivs.style.padding = ('5px');
containerGrid.appendChild(colDivs);
}
}
makeCols (16);

let inputs = document.querySelectorAll('.cols');
for(let k=0; k<inputs.length; k++) {
inputs[k].onclick = rainbowColor;}
let resets = document.querySelectorAll('.cols');
for(let p=0; p<inputs.length; p++) {
inputs[p].onmouseover = rainbowColor;
}

.grid {
width:500px;
}
.grids {
display: grid;
justify-content:center;
align-items:center;
grid-template-columns: repeat(16,1fr);
grid-auto-rows:repeat(16,1fr);
padding: 50px 50px;
margin-left:150px;
height:100px;
width:200px;
}
.rows {
height:10px;
width:10px;
grid-column-gap:10px;

}
.cols {
height:10px;
width:10px;
color:black;
}
.palette.cols:hover {
background-color:'black'; 
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id ="color-picker" class = "palette">
<input type="color" name="Rainbow" id="rainbow-colors" value= "#e66465">
<label for="Rainbow">Rainbow</label>
</div>

<div id = "black-pick" class = "black-color">
<input type="color" name="Black" id="black-color" value="#rrggbb">
<label for="Black">Black</label>
</div>
<div id ="resetDivs" class= "btnReset">
<input type="button" value="Reset">
</div>
<script src="app.js"></script>
</body>
</html>

为了回答您的问题，您只在调用makeCols(我将其重命名为makeGrid，因为这是更准确的描述)时绘制网格。如果不在按钮事件监听器中调用该函数，则永远无法重新绘制网格。

我不完全确定预期的行为应该是什么，但我猜你正试图让Reset按钮摆脱所有的颜色?所以我把它改成只有一个按钮，当你点击它时清除网格。

我也改变了你重置网格的方式。我不认为这是最好的主意，只是将innerHTML设置为""，因为这只会从HTML中删除网格。但是在JS中，它不会从内存中删除数据(例如事件侦听器)!

所以我实现它的方式，网格只绘制一次。当你按下Reset时，它只是将所有框的background-color更改为白色。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div id="color-picker" class="palette">
<input type="color" name="rainbow" id="rainbow" value="#e66465">
<label for="rainbow">Rainbow</label>
</div>
<div id="black-pick" class="black-color">
<input type="color" name="black" id="black" value="#000000">
<label for="black">Black</label>
</div>
<button id="reset">Reset</button>
<br>
<div id="container-grid" class="container"></div>
<script src="app.js"></script>
</body>
</html>

CSS

.container {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(16, 1fr);
padding: 50px 50px;
margin-left: 150px;
width: 200px;
}

.box {
height: 10px;
width: 10px;
color: black;
border: solid;
padding: 5px;
}

button {
padding: 10px;
}

<标题>javascript h1> 里是我还添加的其他修复的摘要: <<h3>一般修复/h3>

重命名id、类和JS变量。其中一些是令人困惑的(比如col实际上指的是单独的盒子)

HTML修复

将type属性添加到<link>标签
HTML中=前后没有空格
<labels>上的for应该参考id，而不是name
value的颜色<input>不应该是#rrggbb。这是占位符文本。我将其设置为#000000，因为这是黑色的十六进制代码
将id/类名更改为连字符而不是camelCase (HTML/CSS使用连字符，JS使用camelCase)

CSS修复

删除未使用的类
grid-auto-rows应该是grid-template-rows
background-color: black不应有引号

JS修复

将onclick更改为事件监听器
将监听器放在<button>s上，而不是包含它们的<div>s上
你正在用JS创建<div>s，你可以使用HTML/CSS。一般来说，如果(a)元素需要动态创建(例如点击)，或者(b)使用JS(如创建网格)更有效，我只使用JS创建元素
当你调用一个函数时，函数名和括号之间没有空格
改变randomColor()使用十六进制代码更有效
不要在for循环中添加col-rowID，因为您正在制作多个列。2个元素不能有相同的ID!
如果你在for循环内的列中添加一个类，为什么要用JS添加样式?他们已经有了类，所以只需设置样式为CSS
将for循环更改为实际使用您在函数中设置的col参数(而不是16*16)
去掉单个盒子上的display: grid

将for循环移动到makeCols()中，因为当您重置时，它会删除所有div及其事件侦听器。以前您只在页面加载时分配事件。你需要在创建新div时分配事件。

function makeCols (col) {
for (let i = 0; i < 16*16; i++) {
const colDivs = document.createElement('div');
colDivs.setAttribute('id', 'col-row');
colDivs.classList.add('cols');
colDivs.textContent ="";
colDivs.style.border = ('solid');
colDivs.style.display= ('grid');
colDivs.style.padding = ('5px');
containerGrid.appendChild(colDivs);
}

let inputs = document.querySelectorAll('.cols');
for(let k=0; k<inputs.length; k++) {
inputs[k].onclick = rainbowColor;}
let resets = document.querySelectorAll('.cols');
for(let p=0; p<inputs.length; p++) {
inputs[p].onmouseover = rainbowColor;
}
}
makeCols (16);

HTML

相关内容

最新更新

热门标签：