0

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>
MunJitso
  • 23
  • 2
  • 10
  • 2
    Once you change the `btn-dark` then the variable is also set to undefined and hence the `for` loop stops working. Change `btn-dark` to `btn`. https://jsfiddle.net/mjqtkLcg/ – m4n0 Apr 05 '21 at 09:44

1 Answers1

1

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>
Ibram Reda
  • 1,882
  • 2
  • 7
  • 18