No sé si estoy haciendo "mal" el proyecto, pero hasta ahora esto ha funcionado. Básicamente, solo estoy creando una versión de JavaScript de Etch a Sketch, donde pasas el mouse sobre un div y cambia de color. Necesito crear un botón que restablezca el div principal a su valor predeterminado, "borrando" efectivamente la página, pero nada de lo que intento parece funcionar. ¿Alguna sugerencia?
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>