Question

0

225

Views

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

I was trying to build a little grid for a Etch A Sketch Project, when I insert the first (with a button using an addEventListener) grid size everything goes fine but when I insert again another grid size the actual divs get stacked under the previous divs: https://i.stack.imgur.com/sS5Wm.jpg

I've tried literally everything but I can't switch the next divs with the previous number of inserted divs.

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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-28T08:50:23.926Z

A quick solution is just add boxWrapper.innerHTML = ""; to the beginning of your addDivs function. It will wipe out all of the content for your boxWrapper every time the function is called.

Also for the testing purposes, I got rid of some of your CSS because your header wasn't viewable.

A better solution would be to use this instead, so it wipes out the event listeners also.

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>

0

225

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

1 answers

0

Find remote jobs

Andres GPT