时间戳

首页 > 解决方案 > 暗模式 TypeError：无法将属性“onClick”设置为 null

javascript - 暗模式 TypeError：无法将属性“onClick”设置为 null

问题描述

这是我的代码，试图添加切换网站颜色的主题按钮，所以我使用了 CSS 变量，我确实知道 js 代码有什么问题

const darkButton = document.getElementById('dark');
const lightButton = document.getElementById('light');
const body = document.body;
darkButton.onClick = () => {
  body.classList.replace('light', 'dark');
  localStorage.setItem('theme', 'dark');
};

lightButton.onClick = () => {
  body.classList.replace('dark', 'light');
  localStorage.setItem('theme', 'light');
};
.light {
  --bg: var(--gray0);
  --bg-nav: linear-gradient(to right, var(--gray1), var(--gray3));
  --bg-dropdown: var(--gray0);
  --text: var(--gray6);
  --border-color: var(--blue);
  --bg-solar: var(--yellow);
}


.dark {
  --bg: var(--gray5);
  --bg-nav: linear-gradient(to right, var(--gray5), var(--gray6));
  --bg-dropdown: var(--gray6);
  --text: var(--gray0);
  --border-color: var(--purple);
  --bg-solar: var(--blue);
}
<div>
            <div class="nav-item has-dropdown">
              <button className="nav-link Togglebutton" href="/">
                Theme
              </button>
              <ul class="dropdown">
                <div class="dropdown-item column">
                  <div id="light">light</div>
                </div>
                <div class="dropdown-item column">
                  <div id="dark">dark</div>
                </div>
              </ul>
            </div>
          </div>

瘦我有这个错误

标签： javascripthtmlcssreactjs

解决方案

使用此代码：

<html>

<head>
    <script language="javascript">
        function toggle(i) {
            if (i == 0) {
                document.body.classList.replace('light', 'dark');
                localStorage.setItem('theme', 'dark');
            }
            if (i == 1) {
                document.body.classList.replace('dark', 'light');
                localStorage.setItem('theme', 'light');
            }
        }
    </script>
</head>

<body>

    <div>
        <div class="nav-item has-dropdown">
            <button className="nav-link Togglebutton" href="/">
                Theme
            </button>
            <ul class="dropdown">
                <div class="dropdown-item column">
                    <div id="light" onclick="toggle(0)">light</div>
                </div>
                <div class="dropdown-item column">
                    <div id="dark" onclick="toggle(1)">dark</div>
                </div>
            </ul>
        </div>
    </div>
</body>

</html>

推荐阅读