Can't seem to get my reset button to work
Question
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>
3 answers
solution1
2 ACCPTED 2022-09-20 22:42:42
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"));
})
solution2
1 2022-09-20 22:41:10
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 class="reset">Shake</button> </body> </html>
solution3
1 2022-09-20 22:42:33
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 (ie 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'))
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.