使用 vanilla JS 动态设置暗模式切换按钮

Question

我正在尝试通过 JS 动态添加一个 dark/light 模式切换按钮，以在我所有的 WordPress 页面上实现。但是，当涉及到未定义的 toggleSwitch 变量时，我遇到了一个错误，此时我不确定为什么。非常感谢任何线索！

function lightDarkMode() {

  const themeSwitch = document.createElement("label");
  themeSwitch.type = "checkbox";
  themeSwitch.classList.add("theme-switch");

  themeSwitch.innerHTML = `<input type="checkbox" id="checkbox" />
    <div class="slider round"></div>`;

  const em = document.createElement("em");
  em.innerHTML = "Enable Dark Mode!";

  const toggleSwitch = document.querySelector(
    '.theme-switch input[type="checkbox"]'
  );
  const currentTheme = localStorage.getItem("theme");

  if (currentTheme) {
    document.documentElement.setAttribute("data-theme", currentTheme);

    if (currentTheme === "dark") {
      toggleSwitch.checked = true;
    }
  }

  function switchTheme(e) {
    if (e.target.checked) {
      document.documentElement.setAttribute("data-theme", "dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.setAttribute("data-theme", "light");
      localStorage.setItem("theme", "light");
    }
  }

  toggleSwitch.addEventListener("change", switchTheme, false);
}

Answer 1

这里的问题是您使用 javascript 动态创建了一个 DOM 中不存在的元素。并且您正在使用 querySelector 查询该元素以获取文档中不存在的元素。因此，为了使其工作，您还需要在 DOM 中添加创建的元素。您可以使用 .append 方法。

你可以这样做：-

  const themeSwitch = document.createElement("label");
  themeSwitch.type = "checkbox";
  themeSwitch.classList.add("theme-switch");

  themeSwitch.innerHTML = `<input type="checkbox" id="checkbox" />
    <div class="slider round"></div>`;

  const em = document.createElement("em");
  em.innerHTML = "Enable Dark Mode!";

  //append the created element so that you can fetch it using query
  document.body.append(themeSwitch);

  const toggleSwitch = document.querySelector(
    '.theme-switch input[type="checkbox"]'
  );

使用 vanilla JS 动态设置暗模式切换按钮

Setting up a dark mode toggle button dynamically with vanilla JS

javascript

themes

toggle