当我单击按钮将所有其他按钮更改为暗模式时，它只工作一次答案

【问题标题】：When I click the button to change all the another buttons to dark mode, it works just a single time当我单击按钮将所有其他按钮更改为暗模式时，它只工作一次
【发布时间】：2021-07-01 04:35:05
【问题描述】：

我制作了一个按钮，将所有页面更改为暗模式。
我有一些深色按钮，我想在单击将页面更改为深色模式的按钮时将其更改为浅色。

问题是当我想将页面更改为暗模式时它可以工作，但是使用暗按钮它只能工作一次，第二个按钮第一次不能工作。

你会在下面找到我写的代码。

谢谢。

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>

【问题讨论】：

一旦您更改了btn-dark，该变量也将设置为未定义，因此for 循环停止工作。将 btn-dark 更改为 btn。 jsfiddle.net/mjqtkLcg

标签： javascript html css dom-events darkmode

【解决方案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>

【讨论】：