Javascript 如何使用两个切换按钮在同一页上具有相同的功能与不同的css？

我一直在努力在菜单栏和页脚上添加两个具有不同样式（css）的切换按钮。它们将用于夜间和黑暗模式

但是当我使用

onclick="themeToggle()" id="theme-switcher" 

对于这两个按钮，只有一个有效

这是我的

这是正在使用的js：

 var tSwitcher = document.getElementById('theme-switcher');
let element = document.body;

 let onpageLoad = localStorage.getItem("theme") || "";
 if(onpageLoad != null && onpageLoad  == 'dark-mode'){
      tSwitcher.checked = true;
 } 
 element.classList.add(onpageLoad);


function themeToggle(){
      if(tSwitcher.checked){
          localStorage.setItem('theme', 'dark-mode');
            element.classList.add('dark-mode');
        } else {
          localStorage.setItem('theme', '');
            element.classList.remove('dark-mode');
        }
    }

这是两个切换按钮的代码

    <label class="switcher">
    <input type="checkbox" onclick="themeToggle()" id="theme-switcher">
    <div>
    <i class="fas fa-sun"></i>
    <i class="fas fa-arrow-left arrow"></i>
    <i class="fas fa-moon"></i>
    </div>
    </label> 

请帮助我解决这个问题的代码以及

---

谢谢您的帮助。

因为您在

中使用了ID，您可以在其他

复选框中重复此操作。因此，将只获取DOM中的第一个ID

更改您的

到


并更新以下代码

注意：不要重复ID

var tSwitcher = document.getElementsByClassName('theme-switcher');
let element = document.body;

let onpageLoad = localStorage.getItem("theme") || "";
if (onpageLoad != null && onpageLoad == 'dark-mode') {
        for(let i = 0; i<tSwitcher.length; i++){
                tSwitcher[i].checked = true;    
    }

}

if(onpageLoad) element.classList.add(onpageLoad);

首先，不能有两个或多个具有相同id的元素

要检测单击的按钮，可以将事件作为参数传递给函数，如下所示

onclick="themeToggle(event)" class="switcher" id="theme-switcher-2"

一旦你有了这个事件，你就可以像这样得到触发它的对象（在你的例子中是按钮）

    function themeToggle(event){
          var tSwitcher = event.target;
          if(tSwitcher.checked){
              localStorage.setItem('theme', 'dark-mode');
                element.classList.add('dark-mode');
            } else {
              localStorage.setItem('theme', '');
                element.classList.remove('dark-mode');
            }
    }

编辑

要正确设置默认行为，必须向每个按钮添加
class=“switcher”
，然后执行此操作

var tSwitchers = document.querySelectorAll('.switcher'));
let onpageLoad = localStorage.getItem("theme") || "";
tSwitchers.forEach((element) => {
    if(onpageLoad != null && onpageLoad  == 'dark-mode'){
       element.checked = true;
    } 
});

如果您使用的是getElementById，它将从dom返回该id的第一个匹配项，并且由于您在两个按钮上都有相同的id，因此每次都会更新第一个按钮。
相反，您可以在click函数中指定event.target以获取按钮元素。
您不能对两个或多个HTML元素使用相同的ID。另外，如果您想在多个元素中使用此功能，我强烈建议您不要使用
onclick
inline。相反，您可以从页面中获取所有切换器并向其添加侦听器：

在页面中获取所有切换器
对它们应用click事件侦听器
最后，必须将
切换器
类添加到所有元素中
示例代码段
Obs.：您应该将其调整到代码中。我不得不评论localStorage，因为它在这里不起作用


constswitchers=document.querySelectorAll（'.switcher'）；
控制台日志（交换机）；
切换器。forEach（（元素）=>{
元素。addEventListener（'单击'，（事件）=>{
主题转换（事件）；
});
});
功能主题切换（事件）{
var tSwitcher=event.target；
如果（t开关已检查）{
//setItem（'theme'，'dark mode'）；
tSwitcher.classList.add（'dark-mode'）；
console.log（“+tSwitcher.id”上的暗模式打开）；
}否则{
//setItem（'theme'，''）；
tSwitcher.classList.remove（'dark-mode'）；
console.log（'暗模式在'+tSwitcher.id'上关闭）；
}
}




它们无法工作的原因是ID总是唯一的。您应该使用不同的ID。@neeraj，请来到聊天室，这正在工作，但现在菜单栏上的按钮在页面刷新@Akhil Aravinddoes时默认回到关闭位置，这在您重新加载页面时发生？？是的，在重新加载页面之前没有发生，谢谢代码正在工作。你能移动到聊天室吗。我还有一个问题@Akhil Aravind–这是可行的，但现在菜单栏上的按钮在页面刷新时默认回到关闭位置@SapikelioThis在我知道之前没有发生过。我省略了这一部分。不过，请给我一分钟，我会解决它的，谢谢你的帮助。你可以在你的按钮上设置
checked=“true”
。当我使用“完整工作片段”时，我的页面无法转到DarkOh，对不起。这实际上并不是“充分发挥作用”。你应该调整你的代码。
    function themeToggle(event){
          var tSwitcher = event.target;
          if(tSwitcher.checked){
              localStorage.setItem('theme', 'dark-mode');
                element.classList.add('dark-mode');
            } else {
              localStorage.setItem('theme', '');
                element.classList.remove('dark-mode');
            }
    }

var tSwitchers = document.querySelectorAll('.switcher'));
let onpageLoad = localStorage.getItem("theme") || "";
tSwitchers.forEach((element) => {
    if(onpageLoad != null && onpageLoad  == 'dark-mode'){
       element.checked = true;
    } 
});

const switchers = document.querySelectorAll('.switcher');

switchers.forEach((element) => {
    element.addEventListener('click', (event) => {
        themeToggle(event);
    });
});

<input type="checkbox" id="theme-switcher-1" class="switcher">
<input type="checkbox" id="theme-switcher-2" class="switcher">
<input type="checkbox" id="theme-switcher-3" class="switcher">

function themeToggle(event){
  var tSwitcher = event.target;
  if(tSwitcher.checked){
    localStorage.setItem('theme', 'dark-mode');
    tSwitcher.classList.add('dark-mode'); // changed element to tSwitcher
    console.log('Dark mode is on');
  } else {
    localStorage.setItem('theme', '');
    tSwitcher.classList.remove('dark-mode'); // changed element to tSwitcher
    console.log('Dark mode is off');
  }
}