TutorialMeta
Ad

Can't Seem To Find A Way To Clear My Divs Back To Default (Etch A Sketch Project)

- 1 answer

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>

Ad

Answer

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>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad