Can't seem to get my reset button to work-CodePudding

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 >Shake</button>
</body>
</html>

CodePudding user response：

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

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

CodePudding user response：

You can fetch all the elements with the active class, then loop over them removing the active class. document.querySelector() only runs once, so you need to run it whenever the button is clicked, instead of once at the beginning of your code.

const container = document.querySelector('#container');
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 () {
  const boxes = document.querySelectorAll('.box');
  for (let i = 0; i < boxes.length; i  ) {
    boxes[i].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 >Shake</button>
</body>
</html>

CodePudding user response：

The reset button runs .classList.remove('active') on div which is actually #container since the variable div is defined once at the beginning of the script (i.e. when no elements other than the container actually exist on the page).

You need to assign div after all the div elements are written in multiDiv(). div should actually store an array of all the divs on the page.

...


multiDiv()
const divs = document.querySelectorAll('div')

...

resetBtn.addEventListener('click', function () {
  divs.forEach(div => div.classList.remove('active'))
})