在Javacript中检查复选框时需要添加类

Question

我通过创建一个具有黑暗和轻度模式的网站来挑战自己。

检查复选框时，它在标题上添加类“灯”，例如默认模式。

我创建了一个脚本，但是我没有找到解决方案，为什么它不起作用，有人可以朝这个方向帮助我吗？

这是我的代码：

let header = document.getElementsByClassName('header');
let switcher = document.querySelector('#switch');

switcher.addEventListener('click',function(){
    if(this.checked){
        header.classList.add('light');
    }
    else{
     header.classList.remove('light');
     }
})

<div class="header ">
            <div class="title-section">
                <h1>Social Media Dashboard</h1>
                <p>Total Followers: 23,004</p>
            </div>
            <div class="switchbtn">
                <label for="switch" id="switchlabel">Dark Mode</label>
                <input type="checkbox" name="switch" id="switch">
            </div>
</div>

Answer 1

几乎，您只是缺少document.getElementsByClassName的索引。这返回一系列匹配项目。因为您只有一个，所以您只能在阵列中获得第一个问题。

因此，您需要更改的只是：

document.getElementsByClassName to document.getElementsByClassName [0]

，您很高兴！

let header = document.getElementsByClassName('header')[0];
let switcher = document.querySelector('#switch');

switcher.addEventListener('click',function(){
    if(this.checked){
        header.classList.add('light');
    }
    else{
     header.classList.remove('light');
     }
})

<div class="header ">
            <div class="title-section">
                <h1>Social Media Dashboard</h1>
                <p>Total Followers: 23,004</p>
            </div>
            <div class="switchbtn">
                <label for="switch" id="switchlabel">Dark Mode</label>
                <input type="checkbox" name="switch" id="switch">
            </div>
</div>

Answer 2

您可以访问集合中输入的标头的HTML，因此请尝试使用

 getElementsByClassName('header')[0].

我更喜欢使用 querySelector（）添加和删除类，这更简单。

Answer 3

我对代码进行了一些更改，以便您可以拥有基础并开始工作。
我更改了getElementsByClassName为getElementById，因为第一个将返回所有元素的数组，其中此类名称。

let header = document.getElementById("header");
let switcher = document.querySelector('#switch');

switcher.addEventListener('click',function(){
    if(this.checked){
      header.classList.add("dark");
    }
    else{
      header.classList.remove("dark");
    }
})

.dark {
  color: white;
  background: black;
}

<div id="header">
            <div class="title-section">
                <h1>Social Media Dashboard</h1>
                <p>Total Followers: 23,004</p>
            </div>
            <div class="switchbtn">
                <label for="switch" id="switchlabel">Dark Mode</label>
                <input type="checkbox" name="switch" id="switch">
            </div>
</div>

另外，当您单击时，我将其变为默认和黑暗。
希望它有帮助。