[英]4 Javascript commands execute simultaneously when 1 button is clicked
我在一个页面上有四个 html 元素，每个元素都意味着在单击时执行不同的 setTheme JS 命令。 但是，当我单击一个时，什么也没有发生。 我很确定它们都是同时执行的，因为它们基本上都是相同的代码，所以它们相互抵消并恢复为默认主题，这意味着我什么也看不到。 但是，我可能是错的。 我该如何解决？
关于此代码的注释：起初我无法弄清楚，所以我上网查找但找不到任何东西，所以我修改了一些用于 toggleTheme function 的代码，而不是 setTheme function。 如果这是问题，我不知道如何解决它，但它可能会帮助你。
这是其中一个的代码（其他类似，但例如，将“theme-light-purple”替换为“theme-light-blue”或“theme-dark-blue”。“theme-dark-紫色'是默认值。）：
<button id="switch-light-purple" onclick="setTheme()">Light Purple</button>
<script>
// function to set a given theme/color-scheme
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// function to set theme
function setTheme() {
setTheme('theme-light-purple');
}
// 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>
<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>
您不需要编写 2 个函数。
这就是你应该有你的代码的方式
function setTheme(themeName = 'theme-light-purple') {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
在这里，如果您想调用setTheme function 而不使用任何类似setTheme()的参数，则为您的第一个参数提供默认值
所以，如果你调用setTheme()它自动意味着你在调用setTheme('theme-light-purple')
如果您希望setTheme()无论是否接收参数都表现不同（并且如果我理解您想要实现的目标），您需要替换：
// function to set a given theme/color-scheme
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// function to set theme
function setTheme() {
setTheme('theme-light-purple');
}
和：
// function to set a given theme/color-scheme or a default one if none is provided
function setTheme(themeName) {
const chosenTheme = themeName ? themeName : 'theme-light-purple';
localStorage.setItem('theme', chosenTheme);
document.documentElement.className = chosenTheme;
}
[编辑] 在评论之后，我添加了一个部分演示； 不幸的是，代码片段无法访问window.localStorage因此无法在此处演示主题的 localStorage 的存储和检索：
/* theme default */ html.theme-default body { color: #333; background-color: #efefef; } html.theme-default button { border: 2px solid #333; border-radius: 3px; color: #333; } html.theme-default p { border: 1px dashed #333; color: #333; } /* theme red */ html.theme-red body { color: #300; background-color: #ffefef; } html.theme-red button { border: 2px solid #c00; border-radius: 3px; color: #300; } html.theme-red p { border: 1px dashed #c00; color: #300; } /* theme green */ html.theme-green body { color: #030; background-color: #efffef; } html.theme-green button { border: 2px solid #0c0; border-radius: 3px; color: #030; } html.theme-green p { border: 1px dashed #0c0; color: #030; } /* theme blue */ html.theme-blue body { color: #003; background-color: #efefff; } html.theme-blue button { border: 2px solid #00c; border-radius: 3px; color: #003; } html.theme-blue p { border: 1px dashed #00c; color: #003; }
<body> <button id="switch-default" onclick="setTheme()">default (grey)</button> <button id="switch-red" onclick="setTheme('theme-red')">red</button> <button id="switch-green" onclick="setTheme('theme-green')">green</button> <button id="switch-blue" onclick="setTheme('theme-blue')">blue</button> <p>Lorem ipsum dolor sit consecutor amet</p> <script> function setTheme(themeName) { const chosenTheme = themeName? themeName: 'theme-default'; // window.localStorage.setItem('theme', chosenTheme); // this line is commented as the code snippet has no access to localStorage document.documentElement.className = chosenTheme; } // Immediately invoked function to set the theme on initial load (function() { /* the following lines are commented as the code snippet has no access to localStorage const storedTheme = window.localStorage.getItem('theme') || null; if (storedTheme) { setTheme(storedTheme); } else { setTheme(); } */ setTheme() // this line should be deleted in the actual code })(); </script> </body>
单击gui按钮时，可以使用运行Windows 8终端命令的JavaScript编写程序吗？
[英]Can programs be written with JavaScript that run Windows 8 terminal commands when a gui button is clicked?
单击按钮时触发 javascript function 并在再次单击时停止
[英]Trigger a javascript function when button is clicked and stop when clicked again
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.