Javascript 使用切换开关更改背景颜色

document.getElementsByName（“复选框”）.onclick=function（）{myFunction（）}；
函数myFunction（）{
document.body.style.backgroundColor=“黑色”；
}

.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{显示：无；}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
身体{
背景色：红色；
}

.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{显示：无；}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
身体{
背景色：红色；
}
拨动开关


document.getElementsByName（“复选框”）.onclick=function（）{myFunction（）}；
函数myFunction（）{
document.body.style.backgroundColor=“黑色”；
}

您应该在此处进行两项更改：

首先，在键入document.getElementsByName（“复选框”）[0]时，应该添加数组索引号，因为

getElementsByName

返回数组：

document.getElementsByName("checkbox")[0].onclick = function() {myFunction()};

其次，您应该添加name

属性

外接程序

复选框

，因为您通过

getElementsByName

选择元素，但它在元素中不存在：

<label class="switch">
  <input type="checkbox" name="checkbox">
   <span class="slider"></span>
</label>

.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{显示：无；}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
身体{
背景色：#BB9797；
}
拨动开关


var checkbox=document.getElementsByName（“复选框”）[0]；
checkbox.onclick=function（）{myFunction（）}；
函数myFunction（）{
如果（checkbox.checked）{document.body.style.backgroundColor=“black”；}
else{document.body.style.backgroundColor=“#BB9797”；}
}

您的代码存在的问题是，由于您使用了错误的方法获取元素，因此没有向复选框注册单击事件。尝试改用id

getElementById

。下面是一个解决方案。希望这有帮助

.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{
显示：无；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
身体{
背景色：#BB9797；
}
拨动开关


document.getElementById（“toggleSwitch”）.onclick=function（）{
myFunction（）
};
函数myFunction（）{
让颜色=document.body.style.background；
如果（颜色==‘黑色’）{
document.body.style.background=“#BB9797”；
}否则{
document.body.style.background=“黑色”；
}
}

我认为另一个更干净的解决方案是使用

classList.toggle

在body元素上切换类。这样，如果需要重新设计颜色，就不需要更改任何代码。只需要更改CSS

document.getElementById（“toggleSwitch”）.onclick=function（）{myFunction（）}；
函数myFunction（）{
document.body.classList.toggle（“打开”）；
}

开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{显示：无；}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：che