Can't seem to get my reset button to work

September 21, 2022

I’m making an etch a sketch as a beginner project and I can’t seem to get my reset button to work. I’ve tried removing the .active class but it doesn’t seem to work. Any suggestions would be greatly appreciated. Sorry if it looks ugly I’m just trying to get the javascript right before I make it look pretty.

const container = document.querySelector('#container');
const div = document.querySelector('div')
const resetBtn = document.querySelector('button')

function createDiv() {
  const box = document.createElement('div');
  box.classList.add('box');
  container.appendChild(box);
}

function multiDiv () {
  for (let i = 0; i < 256; i++) {
    createDiv()
  }
}

multiDiv()


container.addEventListener('mouseover', function (e) {
  // Add the "active" class to only divs with a "box" class
  if (e.target.matches('.box')) {
    e.target.classList.add('active');
  }
});

resetBtn.addEventListener('click', function () {
  div.classList.remove('active')
})

body {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

#container {
  display: grid;
  grid-template-columns: repeat(16, 40px);
  border: 5px solid rgb(173, 173, 239);
  border-radius: 5px;
  margin-top: 90px;
  
}

.box {
  border: 1px solid rgb(205, 202, 202); 
  height: 40px; width: 40px; 
  border-radius: 5px;
  
}

.reset {
  margin-top: 80px;
  background-color: rgb(173, 173, 239);
  color: antiquewhite;
  width: 60px;
  height: 30px;
  font-weight: bold;
}

.active {
  background-color:rgb(43, 88, 73);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch A Sketch</title>
  <link rel="stylesheet" href="style.css">
  <script src="etch.js" defer></script>
</head>
<body>
  <h1>Etch A Sketch</h1>

  <div id="container"></div>

  <button class="reset">Shake</button>
</body>
</html>

>Solution :

You have to remove "active" from all the divs with class="box active".

resetBtn.addEventListener('click', function () {
  const list = [...document.querySelectorAll(".box .active")]; // get all active box divs
  list.forEach(box => box.classList.remove("active"));
})