我花了相当长的时间寻找其他帖子来处理我遇到的任何问题，但我似乎没有找到任何 - 我是 Stack Overflow 的新手。该项目本身需要我使用 JS 操作 DOM。我已经完成了一切，但是重置按钮不起作用。没有出现任何错误，但什么也没有发生。我通过添加控制台日志测试了该按钮，它有效。它与与 createGrid 循环相关的 reset 函数有什么关系吗？任何帮助将不胜感激。
let color = "black";
//Waits for everything to load, then creates default grid size
document.addEventListener("DOMContentLoaded", () => {
createGrid(16);
});
const mainContainer = document.querySelector('.main-container');
mainContainer.stlye = ('display: flex; flex-wrap: wrap; justify-content: center; align-items: center;');
const headerContainer = document.querySelector('.header');
mainContainer.appendChild(headerContainer);
headerContainer.style = ('margin-top: 20px')
const headerP = document.createElement("p");
headerContainer.appendChild(headerP);
headerP.textContent = 'Choose how many squares you would like in your canvas (2 = 2x2 to maximum 100 = 100x100)';
headerP.style = ('margin-bottom: 10px');
const gridInput = document.createElement("input");
gridInput.setAttribute('type', 'number');
gridInput.setAttribute('max', '100');
gridInput.setAttribute('min', '2');
gridInput.style = ('width: 50px; margin-right: 20px');
headerContainer.appendChild(gridInput);
const inputButton = document.createElement("button");
inputButton.textContent = 'Submit';
inputButton.setAttribute('class', 'btn btn-info');
inputButton.style = ('padding: 3px');
headerContainer.appendChild(inputButton);
let canvasContainer = document.querySelector('.canvas-container');
canvasContainer.style = ('height: 600px; width: 600px; display: grid; border: 1px solid black; margin-top: 20px;');
mainContainer.appendChild(canvasContainer);
const footerContainer = document.querySelector('.footer');
footerContainer.style = ('display: flex; justify-content: center; margin-top: 20px')
mainContainer.appendChild(footerContainer);
const eraseButton = document.getElementsByClassName('.btn btn-secondary');
const resetButton = document.getElementsByClassName('.btn btn-warning');
const randomColorButton = document.getElementsByClassName('.btn btn-primary');
//Grid size creation funcion that creates divs in a defined size from a loop and appends it into the grid/canvas container
const createGrid = (num) => {
canvasContainer.style.gridTemplateColumns = `repeat(${num}, 1fr)`
canvasContainer.style.gridTemplateRows = `repeat(${num}, 1fr)`
let numDivs = num * num;
for(let i = 0; i < numDivs; i++) {
let gridDiv = document.createElement('div.canvas');
canvasContainer.appendChild(gridDiv);
gridDiv.addEventListener('mouseover', () => {
//event listener that changes background color depending on which button is selected
if(color == "random") {
let randomR = Math.floor(Math.random() * 256)
let randomG = Math.floor(Math.random() * 256)
let randomB = Math.floor(Math.random() * 256)
gridDiv.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
}
else if(color == "white") {
gridDiv.style.backgroundColor = 'white';
}
else {
gridDiv.style.backgroundColor = 'black';
}
})
canvasContainer.insertAdjacentElement('beforeend', gridDiv)
};
};
const colorize = (colorChoice) => {
color = colorChoice;
}
//Input button to change the grid size based on the input box
inputButton.addEventListener('click', () => {
let gridSize = createGrid(gridInput.value);
createGrid(gridSize);
});
const reset = () => {
let squares = document.querySelectorAll("div")
squares.forEach((div) => div.style.backgroundColor = 'white')
};
<!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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href=styles.css>
</head>
<body>
<h1>Etch-a-Sketch</h1>
<div class="main-container">
<div class="header"></div>
<div class="canvas-container"></div>
<div class="footer">
<button class="btn btn-secondary" id="erase" onclick="colorize('white')">Eraser</button>
<button class="btn btn-danger" id="reset" onclick="reset()">Clear Board</button>
<button class="btn btn-dark" id="black" onclick="colorize('black')">Black Color</button>
<button class="btn btn-primary" id="random" onclick="colorize('random')">Random Colors</button>
</div>
</div>
<script src="scripts.js" defer></script>
</body>
</html>type here
我尝试删除 HTML 中的点击，并为调用重置函数的 ResetButton 添加 addEventListener，但出现错误。我尝试在循环中添加一个事件监听器，看看是否有办法让它以这种方式工作，但也出现了错误。除非我做错了，否则我认为不需要将其注入到createGrid中。
您创建的元素是
<div.canvas></div.canvas>document.querySelectorAll("div")let gridDiv = document.createElement('div');
gridDiv.classList.add("canvas");
然后：
let squares = document.querySelectorAll("div.canvas");