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

我试图通过JS动态添加一个黑暗/光明模式切换按钮，以便在我的所有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);
}

函数lightDarkMode（）{
const themeSwitch=document.createElement（“标签”）；
themeSwitch.type=“复选框”；
themeSwitch.classList.add（“主题切换”）；
themeSwitch.innerHTML=`
`;
const em=document.createElement（“em”）；
em.innerHTML=“启用暗模式！”；
const toggleSwitch=document.querySelector(
'.theme开关输入[type=“checkbox”]'
);
const currentTheme=localStorage.getItem（“主题”）；
如果（当前主题）{
document.documentElement.setAttribute（“数据主题”，currentTheme）；
如果（当前主题==“暗”）{
toggleSwitch.checked=true；
}
}
功能切换主题（e）{
如果（例如，选中目标）{
document.documentElement.setAttribute（“数据主题”、“暗”）；
setItem（“主题”、“暗”）；
}否则{
document.documentElement.setAttribute（“数据主题”、“灯光”）；
setItem（“主题”、“灯光”）；
}
}
toggleSwitch.addEventListener（“更改”，switchTheme，false）；
}

这里的问题是，您使用DOM中不存在的javascript动态创建了一个元素。您正在使用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"]'
  );

const themeSwitch=document.createElement（“标签”）；
themeSwitch.type=“复选框”；
themeSwitch.classList.add（“主题切换”）；
themeSwitch.innerHTML=`
`;
const em=document.createElement（“em”）；
em.innerHTML=“启用暗模式！”；
//附加创建的元素，以便可以使用查询获取它
document.body.append（主题开关）；
const toggleSwitch=document.querySelector(
'.theme开关输入[type=“checkbox”]'
);

我真不敢相信我忘了那部分。非常感谢。