当我单击按钮将所有其他按钮更改为暗模式时，它只工作一次
[英]When I click the button to change all the another buttons to dark mode, it works just a single time
问题描述
I made a button to change all the page to dark mode.
我做了一个按钮，将所有页面更改为暗模式。
I have some dark buttons I want to change it to light when I click the button that change the page to dark mode.我有一些深色按钮，当我单击将页面更改为深色模式的按钮时，我想将其更改为浅色。
The problem is when I want to change the page to dark mode it works, but with the dark buttons it works just a single time, and the second button doesn't work for the first time.问题是当我想将页面更改为暗模式时它可以工作，但是使用暗按钮它只能工作一次，而第二个按钮第一次不起作用。
You will find the code that I write below.您将在下面找到我编写的代码。
Thanks.谢谢。
let darkBackground = document.querySelector('body'); let darkModeBtn = document.getElementById('darkModeBtn'); let btnIcon = document.getElementById('btnIcon'); let codeButton = document.getElementsByClassName('btn-dark'); darkModeBtn.addEventListener('click', function() { darkBackground.classList.toggle('darkbackground'); btnIcon.classList.toggle('fa-sun'); btnIcon.classList.toggle('fa-moon'); for (var i = 0, len = codeButton.length; len > i; i++) { codeButton[i].classList.toggle('btn-light'); codeButton[i].classList.toggle('btn-dark'); }; });
.darkbackground { background-color: rgb(46, 45, 49); transition: .15s; color: white; }.darkmodebtn { font-size: 1.50rem; padding: 0.5rem 0.85rem; background-color: rgba(47, 128, 237, 1); outline: none; border: 0; border-radius: 20px; color: white; position: fixed; bottom: 18px; right: 18px; }.darkmodebtn:focus { outline: none; }
<,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"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" rel="stylesheet"/> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> <title>Document</title> </head> <body> <a href="#" class="btn btn-dark">Light and Black</a> <a href="#" class="btn btn-dark">Light and Black</a> <a href="#" class="btn btn-dark">Light and Black</a> <button class="darkmodebtn" id="darkModeBtn"><i id="btnIcon" class="fas fa-moon"></i></button> </body> </html>
1 个解决方案
解决方案1
0 2021-04-05 09:49:15
let darkBackground = document.querySelector('body'); let darkModeBtn = document.getElementById('darkModeBtn'); let btnIcon = document.getElementById('btnIcon'); let codeButton = document.getElementsByClassName('code-btn'); darkModeBtn.addEventListener('click', function() { darkBackground.classList.toggle('darkbackground'); btnIcon.classList.toggle('fa-sun'); btnIcon.classList.toggle('fa-moon'); for (var i = 0, len = codeButton.length; len > i; i++) { codeButton[i].classList.toggle('btn-light'); codeButton[i].classList.toggle('btn-dark'); }; });
.darkbackground { background-color: rgb(46, 45, 49); transition: .15s; color: white; }.darkmodebtn { font-size: 1.50rem; padding: 0.5rem 0.85rem; background-color: rgba(47, 128, 237, 1); outline: none; border: 0; border-radius: 20px; color: white; position: fixed; bottom: 18px; right: 18px; }.darkmodebtn:focus { outline: none; }
<,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"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" rel="stylesheet"/> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> <title>Document</title> </head> <body> <a href="#" class="btn code-btn btn-dark">Light and Black</a> <a href="#" class="btn code-btn btn-dark">Light and Black</a> <a href="#" class="btn code-btn btn-dark">Light and Black</a> <button class="darkmodebtn" id="darkModeBtn"><i id="btnIcon" class="fas fa-moon"></i></button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当我单击暗模式按钮时，我也想将暗模式应用于 iframe 标签 - When I click the dark mode button, I want to apply the dark mode to the iframe tag as well
当我第一次点击删除按钮时，所有的笔记都消失了，但是当我刷新页面时它工作得很好 - When I first click the delete button, all the notes are disappeared but, when I refresh the page it works just fine
将单个单击事件绑定到多个按钮时，如何使被单击的按钮做一件事，而其他所有按钮做另一件事？ - When binding a single click event to multiple buttons, how can I make the clicked button do one thing and all the other buttons do another?
当我单击特定的“addToBasket”按钮时，我不想更改所有“addToBasket”按钮。 只有点击的按钮应该改变 - I do not want all the "addToBasket" buttons to change when i click on a specefic "addToBasket" button. Only the clicked button should change
通过切换按钮打开暗模式时更改边框颜色 - Change border color when turn on dark mode via toggle button
如何激活模式以在所有3个按钮上单击而不仅仅是在一个按钮上打开？ - How to activate modal to open on all 3 buttons click and not just with one button?
按钮 onClick 事件不起作用，但当我在 Chrome 中显示检查模式时工作正常 - Button onClick event does not work but works just fine when I display the Inspect mode in Chrome
在 html 网站中添加一个按钮以更改为暗模式 - Add a button to change to dark mode in html website
在反应网站中添加一个按钮以更改为暗模式 - Add a button to change to dark mode in react website
如何使用暗模式按钮更改表类 - how to change table class with a dark mode button
相关标签