When I click the button to change all the another buttons to dark mode, it works just a single time
Question
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 answers
solution1
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>
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.
Related Question
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?
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
How to activate modal to open on all 3 buttons click and not just with one button?
Button onClick event does not work but works just fine when I display the Inspect mode in Chrome
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
Related Tags