CSS元素激活异常：动态添加的<li>无法切换.active类

你的问题核心是事件绑定时机错误：页面加载完成后，你通过document.querySelectorAll(".todo")获取了当时存在的所有任务项并绑定点击事件，但通过按钮动态新增的任务项是在这之后才创建的，所以没有被绑定事件监听。

下面提供两种可行的解决方案：

方法一：创建新任务时直接绑定事件 #

修改你的addTask函数，在将新任务项添加到列表前，为它绑定切换状态的事件：

function addTask() {
  var ul = document.getElementById("mondayList")
  var li = document.createElement("li")
  li.className = 'todo'
  li.appendChild(document.createTextNode("TaskName"));
  
  // 给新创建的任务项绑定点击事件
  li.addEventListener("click", () => {
    li.classList.toggle('active');
  })
  
  ul.appendChild(li);
}

方法二：使用事件委托（更推荐） #

利用事件冒泡机制，把事件绑定到任务列表的父容器上，这样不管是初始存在还是动态添加的任务项，只要点击的是.todo元素，就能触发状态切换。这种方式更高效，尤其适合需要批量处理动态元素的场景：

// 替换原代码中todos.forEach的部分
document.getElementById("todos").addEventListener("click", (e) => {
  // 验证点击目标是任务项
  if (e.target.classList.contains("todo")) {
    e.target.classList.toggle('active');
  }
})

额外优化：让Add按钮支持所有日期列表 #

目前你的addTask函数只针对周一的列表，其他日期的Add按钮还没生效。可以改造成通用函数，接收列表ID作为参数：

function addTask(listId) {
  var ul = document.getElementById(listId)
  var li = document.createElement("li")
  li.className = 'todo'
  li.appendChild(document.createTextNode("TaskName"));
  
  li.addEventListener("click", () => {
    li.classList.toggle('active');
  })
  
  ul.appendChild(li);
}

然后修改HTML中各日期的Add按钮：

<!-- 周二的Add按钮示例 -->
<a class="btn btn-primary fw-light" onclick="addTask('tuesdayList')">Add Task</a>

内容的提问来源于stack exchange，提问作者Ivan Dvurechenskiy