切换暗模式-新创建元素的问题

Question

我想让JS暗模式切换与点击事件，但它有效与HTML元素，但它不工作与JavaScript创建的元素使用DOM。

let body = document.querySelector(`body`);
let input = document.querySelector(`.input`);
let addBtn = document.querySelector(`.add`);
let form = document.querySelector(`.form`);
let container = document.querySelector(`.tasks`);
form.addEventListener(`submit`, (e) => {
e.preventDefault();
const task = input.value;
if (!task) {
window.alert(`please fill the input!`);
} else {
const taskEl = document.createElement(`div`);
taskEl.classList.add(`task`);
const taskContentEl = document.createElement(`div`);
taskContentEl.appendChild(document.createTextNode(task));
taskEl.appendChild(taskContentEl);
container.appendChild(taskEl);
input.value = ``;
}
});
function darkMode() {
let darkBtn = document.querySelector(`.btn`);
darkBtn.onclick = () => {
form.classList.toggle(`formDark`);
input.classList.toggle(`inputDark`);
body.classList.toggle(`bodyDark`);
//here is the code that's not works 
taskEl.classList.toggle(`inputDark`);
};
}
darkMode();

<button type="button" class="btn">Dark mode</button>
<form class="form">
<input>
</form>
<div class="tasks"></div>

Answer 1

看答案:暗模式使用LocalStorage为例，说明如何实现暗模式切换。

---

在当前或未来元素上切换暗模式样式

?简单。不要使用包含所有元素的特定JS列表来切换类。
在body元素上设置"dark"类。然后，使用CSS设置其他样式:

document.body.classList.toggle("dark");

.dark .input {}
.dark .add {}
.dark .someFutureElement {}

---

重写代码的示例:

// DOM utility functions:
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// App: Tasks
const elInput = el(`#taskInput`);
const elAdd = el(`#taskAdd`);
const elForm = el(`#taskForm`);
const elTasks = el(`#tasks`);
const createTask = (task) => {
tasks.push(task);
const elTask = elNew(`li`, {textContent: task, className: "task"});
elTasks.append(elTask);
};
elForm.addEventListener(`submit`, (evt) => {
evt.preventDefault();
const task = elInput.value.trim(); // Trim from whitespaces!
if (!task) return alert(`Please, fill the input!`);
createTask(task);
elInput.value = ``;
});
// Init: Populate existing tasks
const tasks = ["Drink coffee", "Develop some app"];
tasks.forEach(createTask);

// App: Dark mode
const elBody = el(`body`);
const elToggleDark = el(`#toggleDark`);
elToggleDark.addEventListener("click", () => {
elBody.classList.toggle("dark", elToggleDark.checked);
});

.dark {
background: #333;
color: #fff;
}
.dark #taskInput {
background: rgba(255,255,255,0.2);
color: #fff;
}
.dark ol {
border: 1px solid rgba(255,255,255,0.2);
}

<label><input type="checkbox" id="toggleDark"> Toggle Dark Mode</label>
<form id="taskForm">
<input id="taskInput" type="text" placeholder="Task...">
<button id="taskAdd">Add</button>
</form>
<ol id="tasks"></ol>

Answer 2

在第一个事件监听器中，您可以检查body标签上是否已经存在暗模式

form.addEventListener(`submit`, (e) => {
e.preventDefault();
const task = input.value;
const createTaskEl = () => {
const taskEl = document.createElement(`div`);
taskEl.classList.add(`task`);
const taskContentEl = document.createElement(`div`);
taskContentEl.appendChild(document.createTextNode(task));
taskEl.appendChild(taskContentEl);
container.appendChild(taskEl);
input.value = ``;
}  
if (!task) {
window.alert(`please fill the input!`);
} else {
// Check if the body element is already in in dark mode
if(!body.classList.contains('bodyDark')){
createTaskEl()
} else {
createTaskEl()
let taskEl = document.querySelector(`.task`);
taskEl.classList.add(`inputDark`);
}
}
});

你需要先检查任务是否存在。

function darkMode() {
let darkBtn = document.querySelector(`.btn`);
darkBtn.onclick = () => {
let taskEl = document.querySelector(`.task`);
const primaryEls = () => {
form.classList.toggle(`formDark`),        
input.classList.toggle(`inputDark`),
body.classList.toggle(`bodyDark`)
}
if(taskEl){
primaryEls();
taskEl.classList.toggle(`inputDark`); 
} else {
primaryEls();
}
};
}