似乎無法讓我的重置按鈕工作
[英]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.