似乎無法找到將我的div清除回默認值的方法（EtchaSketch專案）-有解無憂

我不知道我是否在做“錯誤”的專案，但到目前為止這一直有效。我基本上只是在創建 Etch a Sketch 的 JavaScript 版本，您將滑鼠懸停在 div 上，它會改變顏色。我需要創建一個按鈕，將主 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() {
    /// this is where I'm struggling
}

<div class="button">
    <button class="clearBtn" onclick="clearDiv()">CLEAR</button>
</div>

<div id="main"></div>

uj5u.com熱心網友回復：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/446505.html

標籤：javascript html 按钮

上一篇：遍歷一組物件并計算一個屬性值

下一篇：如何將外部腳本包含到<script>中？