需要在javascript中选中复选框时添加一个类

Question

我正在挑战自己，创建一个有暗和亮模式的网站。

当复选框被选中时，它会添加类"light"在标题为例,黑暗是默认的模式。

我已经创建了一个脚本，但我没有找到解决方案，为什么它不工作，有人可以帮助我在这个方向?

下面是我的代码:

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的索引。这将返回一个匹配项的数组。因为你只有一个，所以你可以取数组中的第一个，没有问题。

所以你需要改变的是:

文档。

你就可以走了!

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>

同时，我把它设置为默认的白色和黑色当你点击。希望能有所帮助。