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

Question

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

关于这段代码的注意事项：一开始我想不通，所以我在网上找了找也没找到任何东西，所以我修改了一些用于 toggleTheme 函数的代码，而不是 setTheme 函数。如果这是问题所在，我不知道如何解决，但它可能对您有所帮助。

这是其中之一的代码（其他的类似，但例如 'theme-light-purple' 被 'theme-light-blue' 或 'theme-dark-blue' 替换。'theme-dark-purple' 是默认值。):

<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>

Answer 1

这就是您应该拥有代码的方式

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

在这里，您为第一个参数提供了一个默认值，以防您想在不使用任何参数的情况下调用 setTheme 函数，例如 setTheme()

因此，如果您调用 setTheme()，它会自动表示您正在调用 setTheme('theme-light-purple')

Here's the official documentation for default parameters if you want to go through.

Answer 2

如果您希望 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;
}

[编辑] 在评论之后，我添加了一个 partial 演示；不幸的是，代码片段无法访问 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>

Answer 3

<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个函数。

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

4 Javascript commands execute simultaneously when 1 button is clicked

html

javascript

themes