[英]Setting up a dark mode toggle button dynamically with 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);
}
這里的問題是您使用 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"]'
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.