To Do List开发Bug：新增p元素样式需二次点击才生效

你的bug核心原因是：element.style只能读取元素的行内样式，无法获取CSS类中定义的样式。

你通过.text-style类给任务元素设置了color: black，但初始状态下元素的行内style属性里并没有color值，所以第一次点击时task.style.color === "black"的判断结果是false，会执行else分支把行内样式设为black；第二次点击时，行内样式已经存在color: black，才会触发if逻辑切换为红色样式。

下面给两种解决思路：

思路1：获取元素计算后的实际样式 #

使用window.getComputedStyle()获取元素最终渲染的样式（包含CSS类的设置），注意该方法返回的颜色值是RGB格式，判断时要对应：

修改JS中的点击事件代码：

task.onclick = function() {
  const actualStyle = window.getComputedStyle(task);
  // getComputedStyle返回的black是rgb(0, 0, 0)格式
  if (actualStyle.color === "rgb(0, 0, 0)") {
    task.style.color = "red";
    task.style.textDecoration = "line-through";
  } else {
    task.style.color = "black";
    task.style.textDecoration = "none";
  }
}

思路2：用CSS类切换样式（更推荐） #

这种方式将样式逻辑完全放在CSS中，JS只负责切换类，符合样式与逻辑分离的最佳实践，代码更简洁易维护：

第一步：在CSS中添加完成状态类 #

.text-style {
  /* 保留原有样式 */
  display: flex;
  background-color: white;
  width: 780px;
  height: 50px;
  align-items: center;
  margin-left: 10px;
  margin-right: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  color: black;
  /* 可选：添加过渡动画提升交互体验 */
  transition: all 0.2s ease;
}

/* 新增完成状态类 */
.text-style.completed {
  color: red;
  text-decoration: line-through;
}

第二步：修改JS中的点击事件 #

task.onclick = function() {
  // 一键切换completed类
  task.classList.toggle("completed");
}

额外优化：移除冗余代码 #

你的代码中存在重复添加元素的操作：先把task添加到body，又立刻移到container里，直接删掉document.body.append(task);即可，创建元素后直接添加到目标容器：

// 创建p元素
let task = document.createElement("p");
task.classList.add("text-style");
document.querySelector(".container").appendChild(task); // 直接添加到container
task.innerHTML = usr;

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