似乎无法让我的重置按钮工作
[英]Can't seem to get my reset button to work
问题描述
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.我试过删除 .active class 但它似乎不起作用。 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.抱歉，如果它看起来很丑，我只是想在让它看起来漂亮之前得到 javascript。
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 个解决方案
解决方案1
2 已采纳 2022-09-20 22:42:42
You have to remove "active" from all the divs with class="box active".您必须从所有具有 class="box active" 的 div 中删除“active”。
resetBtn.addEventListener('click', function () {
const list = [...document.querySelectorAll(".box .active")]; // get all active box divs
list.forEach(box => box.classList.remove("active"));
})
解决方案2
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.您可以使用active的 class 获取所有元素，然后遍历它们以删除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. document.querySelector()只运行一次，因此您需要在单击按钮时运行它，而不是在代码开头运行一次。
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>
解决方案3
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).重置按钮在实际上是#container的div上运行.classList.remove('active') ，因为变量div在脚本开头定义了一次（即当页面上实际上不存在容器以外的元素时）。
You need to assign div after all the div elements are written in multiDiv() .在将所有 div 元素写入multiDiv()之后，您需要分配div 。 div should actually store an array of all the divs on the page. div实际上应该存储页面上所有 div 的数组。
...
multiDiv()
const divs = document.querySelectorAll('div')
...
resetBtn.addEventListener('click', function () {
divs.forEach(div => div.classList.remove('active'))
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.