在反应网站中添加一个按钮以更改为暗模式

Question

我想在我的网站上调出一个按钮，让用户可以随时更改为深色或浅色模式。我按照教程进行了暗模式，但问题是用户必须按 Enter 键才能进入暗模式。但我希望有一个按钮可以帮助他们更改为暗模式或亮模式这是我的代码在js中使用：-

<script>
      window.onload = function () {
  document.onkeypress = function (e) {
    console.log(e);
    e = e || window.event;
    if (e.keyCode === 13) {
      document.documentElement.classList.toggle("dark-mode");
      document.querySelectorAll(".inverted").forEach((result) => {
        result.classList.toggle("invert");
      });
    }
  };
};
    </script>

这是我在 css 中使用的：-

.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}
.invert {
  filter: invert(1) hue-rotate(180deg);
}'

js 中的 .inverted 类是因为我不希望图像反转它们的颜色.. 所以我给所有图像一个 class='inverted'

所以，这就是我所做的，有人请让我知道我应该如何调出一个更改为深色或浅色模式的按钮，而不是按 Enter 键

谢谢！

Answer 1

您可以在按钮上的onClick 事件上运行该函数，如下所示：

<button onClick="toggleMode()">Toggle Mode</button>

<script>
  function toggleMode () {
      document.documentElement.classList.toggle("dark-mode");
      document.querySelectorAll(".inverted").forEach((result) => {
        result.classList.toggle("invert");
      })
  }
</script>

Answer 2

您可以在 HTML 页面上创建一个按钮，然后为其附加一个事件侦听器。

function myfunction(e) {
  console.log("you clicked");
  document.documentElement.classList.toggle("dark-mode");
  document.querySelectorAll(".inverted").forEach((result) => {
    result.classList.toggle("invert");
  });
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);

<button class="btn">Dark Mode</button>

顺便说一句，你为什么在 react-app 中使用 script 标签？