如何使用父级 div 中的 addEventListener 通过按钮切换 divs？

Question

我正在尝试为 Etch A Sketch 项目构建一个小网格，当我插入第一个（带有一个使用 addEventListener 的按钮）网格尺寸时一切正常，但是当我再次插入另一个网格尺寸时，实际的 div 得到堆叠在之前的 div 下： https://i.stack.imgur.com/sS5Wm.jpg

我几乎什么都试过了，但我无法用之前插入的 div 数切换下一个 div。

const boxWrapper = document.querySelector('.box-wrapper');
const boxBtn = document.querySelector('#box-btn');

boxBtn.addEventListener("click", addDivs);

function addDivs() {
let size = window.prompt("Insert grid size: ");

  for (let i = 0; i < size; i++) {
        for (let j = 0; j < size; j++) {
         const div = document.createElement("div");
         div.classList.add("boxes");
         div.style.width = 100 / size + "%";
         div.style.height = 100 / size + "%";
         boxWrapper.appendChild(div);
        }
  }
}

    *{
      box-sizing: border-box;
    }


    body {
      display: grid;
      place-items: center;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
    }


    h1{
      margin: -20px 0 0 0;
    }

    .dark{
      background-color: #000000;
    }

    .boxes{
      background-color: #eeeeee;
      border: 0.5px dotted #7d7d7d;
      display: grid;
      place-items: center;
    }

    .boxes:hover{
      background-color: #fff;
    }

    .box-wrapper{
      margin: 0;
      padding: 0;
      margin-top: -115px;
      display: flex;
      flex-flow: row wrap;
      width: 510px;
      height: 510px;
      background-color: #ffffff;
      border: 5px solid #7d7d7d;
    }

    #box-btn{
        margin-top: -155px;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Etch A Sketch</title>
    </head>
    <body>
      <h1>ETCH A SKETCH</h1>
      <button id = "box-btn">Create a grid</button>
      <div class="box-wrapper">
      </div>
    </body>
    </html>

Answer 1

一个快速的解决方案是将 boxWrapper.innerHTML = ""; 添加到 addDivs 函数的开头。每次调用该函数时，它都会清除您的 boxWrapper 的所有内容。

同样出于测试目的，我删除了您的一些 CSS，因为您的 header 不可见。

更好的解决方案是改用它，这样它也会消除事件侦听器。

while (boxWrapper.firstChild) {
        boxWrapper.removeChild(boxWrapper.firstChild);
    }

const boxWrapper = document.querySelector('.box-wrapper');
const boxBtn = document.querySelector('#box-btn');

boxBtn.addEventListener("click", addDivs);

function addDivs() {


    while (boxWrapper.firstChild) {
            boxWrapper.removeChild(boxWrapper.firstChild);
        }
        
let size = window.prompt("Insert grid size: ");

  for (let i = 0; i < size; i++) {
        for (let j = 0; j < size; j++) {
         const div = document.createElement("div");
         div.classList.add("boxes");
         div.style.width = 100 / size + "%";
         div.style.height = 100 / size + "%";
         boxWrapper.appendChild(div);
        }
  }
}

*{
      box-sizing: border-box;
    }


    body {
      display: grid;
      place-items: center;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
    }


    h1{
      margin: -20px 0 0 0;
    }

    .dark{
      background-color: #000000;
    }

    .boxes{
      background-color: #eeeeee;
      border: 0.5px dotted #7d7d7d;
      display: grid;
      place-items: center;
    }

    .boxes:hover{
      background-color: #fff;
    }

    .box-wrapper{
      margin: 0;
      padding: 0;
      display: flex;
      flex-flow: row wrap;
      width: 510px;
      height: 510px;
      background-color: #ffffff;
      border: 5px solid #7d7d7d;
    }

<h1>ETCH A SKETCH</h1>
      <button id = "box-btn">Create a grid</button>
      <div class="box-wrapper">
      </div>

如何使用父级 div 中的 addEventListener 通过按钮切换 divs？

How can I switch divs with a button using addEventListener inside a parent div?

html

javascript

css

addeventlistener