I don't know if I'm doing the project "wrong" but so far this has been working. I'm basically just creating a JavaScript version of Etch a Sketch, where you hover your mouse over a div and it changes color. I need to create a button that resets the main div back to default, effectively "clearing" the page but nothing I try seems to work. Any suggestions?
const mainDev = document.createElement("div");
mainDev.style.width = "200px";
mainDev.style.height = "200px";
mainDev.style.display = "grid";
mainDev.id = "divId";
mainDev.style.gridTemplateColumns = "repeat(16, 1fr)";
let addMain = document.getElementById("main");
addMain.appendChild(mainDev);
for (let i = 0; i < 240; i++) {
const sixteenDivs = document.createElement("div");
sixteenDivs.classList.add("sixteen");
sixteenDivs.style.backgroundColor = "white";
sixteenDivs.style.width = "45px";
sixteenDivs.style.height = "45px";
sixteenDivs.style.border = "1px solid #000"
sixteenDivs.style.display = "grid";
sixteenDivs.style.margin = "5px 5px";
let mouseOver = function() { sixteenDivs.style.backgroundColor = "rgb(20, 20, 20)" };
sixteenDivs.onmouseover = mouseOver;
mainDev.appendChild(sixteenDivs);
}
function clearDiv() {
/// this is where I'm struggling
}<div class="button">
<button class="clearBtn" onclick="clearDiv()">CLEAR</button>
</div>
<div id="main"></div>const mainDev = document.createElement("div");
mainDev.style.width = "200px";
mainDev.style.height = "200px";
mainDev.style.display = "grid";
mainDev.id = "divId";
mainDev.style.gridTemplateColumns = "repeat(16, 1fr)";
let addMain = document.getElementById("main");
addMain.appendChild(mainDev);
for (let i = 0; i < 240; i++) {
const sixteenDivs = document.createElement("div");
sixteenDivs.classList.add("sixteen");
sixteenDivs.style.backgroundColor = "white";
sixteenDivs.style.width = "45px";
sixteenDivs.style.height = "45px";
sixteenDivs.style.border = "1px solid #000"
sixteenDivs.style.display = "grid";
sixteenDivs.style.margin = "5px 5px";
let mouseOver = function() {
sixteenDivs.style.backgroundColor = "rgb(20, 20, 20)"
};
sixteenDivs.onmouseover = mouseOver;
mainDev.appendChild(sixteenDivs);
}
function clearDiv() {
mainDev.childNodes.forEach((child) =>
child.style.backgroundColor = "white"
)
}<div class="button">
<button class="clearBtn" onclick="clearDiv()">CLEAR</button>
</div>
<div id="main">
</div>