单击1个按钮时，4个Javascript命令同时执行

我在一个页面上有四个html元素，每个元素都意味着在单击时执行不同的setTheme JS命令。但是，当我单击其中一个时，什么也没有发生。我很确定它们都在同一时间执行，因为它们基本上都是相同的代码，它们相互抵消，然后返回到默认主题，这意味着我什么也看不到。然而，我可能错了。我该如何解决这个问题

关于这段代码的一个注意事项：我一开始无法理解这一点，所以我在网上查找，但找不到任何东西，所以我修改了一些用于toggleTheme函数的代码，而不是setTheme函数。如果这是问题所在，我不知道如何解决，但它可能会帮助你

这是其中一个的代码（其他代码类似，但例如，“主题浅紫色”替换为“主题浅蓝色”或“主题深蓝色”。“主题深紫色”是默认值。）：

浅紫色
//函数设置给定的主题/颜色方案
函数集主题（主题名）{
setItem（'theme'，themeName）；
document.documentElement.className=名称；
}
//设置主题的函数
函数setTheme（）{
setTheme（“theme-light-purple”）；
}
//立即调用函数将主题设置为初始加载
（功能（）{
if（localStorage.getItem（'theme'）=='theme淡紫色'）{
setTheme（“theme-light-purple”）；
}否则{
setTheme（“theme-深紫色”）；
}
})();

这就是你应该如何拥有你的代码

function setTheme(themeName = 'theme-light-purple') {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

在这里，如果要调用

setTheme

函数而不调用任何类似于

setTheme（）

的参数，您将为第一个参数提供一个默认值

因此，如果您调用

setTheme（）

它会自动表示您正在调用

setTheme（'theme-light-purple'）

如果希望

setTheme（）

在接收或不接收参数时表现不同（如果我理解您想要实现的目标），则需要替换：

//用于设置给定主题/配色方案的函数
函数集主题（主题名）{
setItem（'theme'，themeName）；
document.documentElement.className=名称；
}
//设置主题的函数
函数setTheme（）{
setTheme（“theme-light-purple”）；
}

与：

//用于设置给定主题/配色方案的函数，如果未提供，则设置默认主题/配色方案
函数集主题（主题名）{
const chosenTheme=themeName？themeName:“主题淡紫色”；
setItem（'theme'，chosenTheme）；
document.documentElement.className=chosenTheme；
}

[编辑]在评论之后，我添加了一个部分演示；不幸的是，代码段无法访问

窗口。localStorage

，因此无法在此演示主题的localStorage的存储和检索：

/*主题默认值*/
html.theme-defaultbody{
颜色：#333；
背景色：#EFEF；
}
html.theme-default按钮{
边框：2倍实心#333；
边界半径：3px；
颜色：#333；
}
html.theme-default p{
边框：1px虚线#333；
颜色：#333；
}
/*主题红*/
html.theme-red正文{
颜色：#300；
背景色：#ffefefef；
}
html.theme-red按钮{
边框：2px实心#c00；
边界半径：3px；
颜色：#300；
}
主题红{
边框：1px虚线#c00；
颜色：#300；
}
/*主题绿*/
绿色主体{
颜色：#030；
背景色：#efffef；
}
html.theme-green按钮{
边框：2px实心#0c0；
边界半径：3px；
颜色：#030；
}
主题绿色{
边框：1px虚线#0c0；
颜色：#030；
}
/*主题蓝*/
html.theme-blue body{
颜色：#003；
背景色：#efefff；
}
主题蓝色按钮{
边框：2倍实心#00c；
边界半径：3px；
颜色：#003；
}
主题蓝{
边框：1px虚线#00c；
颜色：#003；
}

默认值（灰色）
红色
绿色
蓝色
同侧隐窝

函数集主题（主题名）{
const chosenTheme=themeName？themeName:“主题默认值”；
//window.localStorage.setItem（'theme'，chosenTheme）；//由于代码段无法访问localStorage，因此对此行进行了注释
document.documentElement.className=chosenTheme；
}
//立即调用函数将主题设置为初始加载
（功能（）{
/*以下几行被注释为代码段无法访问localStorage
const-storedTheme=window.localStorage.getItem（'theme'）| | null；
如果（存储主题）{
设置主题（存储主题）；
}否则{
setTheme（）；
}
*/
setTheme（）//应在实际代码中删除此行
})();

浅紫色
//函数设置给定的主题/颜色方案
函数集主题（主题名）{
setItem（'theme'，themeName）；
document.documentElement.className=名称；
}
//立即调用函数将主题设置为初始加载
（功能（）{
if（localStorage.getItem（'theme'）=='theme淡紫色'）{
setTheme（“theme-light-purple”）；
}否则{
setTheme（“theme-深紫色”）；
}
})();

---

您不需要编写两个函数。

未捕获的内部错误：递归太多

您到底想实现什么？第二个

setTheme

函数定义将覆盖第一个。为什么有两个函数的名称相同？为什么有两个

setTheme

函数？为什么不将第二个

setTheme

名称更改为类似

resetTheme

的名称，因为它不需要任何参数？我正试图用不同的方式更改我站点的颜色方案，每个按钮都不同。我有两个setTheme函数，因为第一个是定义在哪里找到documentElement，第二个是执行命令。我应该把它们合并成一个吗

function setTheme(themeName = 'theme-light-purple') {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

<button id="switch-light-purple" onclick="setTheme('theme-light-purple-dark')">Light Purple</button>

<script>
  // function to set a given theme/color-scheme
  function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
  }

  // Immediately invoked function to set the theme on initial load
  (function () {
    if (localStorage.getItem('theme') === 'theme-light-purple') {
      setTheme('theme-light-purple');
    } else {
      setTheme('theme-dark-purple');
    }
  })();
</script>