似乎无法让我的重置按钮工作
[英]Can't seem to get my reset button to work
问题描述
我正在制作一个草图作为初学者项目，我似乎无法让我的重置按钮工作。 我试过删除 .active class 但它似乎不起作用。 任何建议将不胜感激。 抱歉，如果它看起来很丑，我只是想在让它看起来漂亮之前得到 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
您必须从所有具有 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
您可以使用active的 class 获取所有元素，然后遍历它们以删除active的 class。 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
重置按钮在实际上是#container的div上运行.classList.remove('active') ，因为变量div在脚本开头定义了一次（即当页面上实际上不存在容器以外的元素时）。
在将所有 div 元素写入multiDiv()之后，您需要分配div 。 div实际上应该存储页面上所有 div 的数组。
...
multiDiv()
const divs = document.querySelectorAll('div')
...
resetBtn.addEventListener('click', function () {
divs.forEach(div => div.classList.remove('active'))
})
我似乎无法让我的悬停效果在按钮上工作。 尝试了很多技巧
[英]i can't seem to get my hover effects to work on button. have tried many tips
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.