ToDoList首次点击需双击显示删除线问题排查求助

问题根源 #

新添加的事项首次点击需双击才生效，核心原因是样式判断逻辑和初始样式定义不匹配：

• CSS中.markIcon默认通过样式表设置visibility: hidden
• JS的addStrike函数判断的是元素的内联样式（markIcon.style.visibility），但新创建的元素没有设置内联visibility属性，首次点击时该值为空字符串，不等于"hidden"，导致逻辑走了else分支（把图标设为hidden），第二次点击才会触发正确的状态切换。

修复方案 #

方案1：用CSS类控制状态（推荐，符合样式与逻辑分离原则） #

1. 修改CSS，新增控制图标显示的类：

.markIcon {
  order: 1;
  padding: 12px;
  color: white;
  visibility: hidden; /* 保持默认隐藏 */
}
/* 新增类控制显示 */
.markIcon.show {
  visibility: visible;
}

2. 调整JS的addStrike函数，通过类切换状态：

function addStrike() {
  const isMarkVisible = markIcon.classList.contains('show');
  if (!isMarkVisible) {
    markIcon.classList.add('show');
    item.style.backgroundColor = "#888888";
    to_do_text.classList.add("to_do_text_on");
    delButton.classList.add("del_but_on");
  } else {
    markIcon.classList.remove('show');
    to_do_text.classList.remove("to_do_text_on");
    delButton.classList.remove("del_but_on");
    item.style.backgroundColor = "white";
  }
}

方案2：修改判断逻辑兼容初始空值 #

如果不想调整CSS，直接修改JS的判断条件，包含初始空值的情况：

function addStrike() {
  // 空字符串表示初始状态（样式表设置的hidden）
  if (markIcon.style.visibility === "hidden" || markIcon.style.visibility === "") {
    markIcon.style.visibility = "visible";
    item.style.backgroundColor = "#888888";
    to_do_text.classList.add("to_do_text_on");
    delButton.classList.add("del_but_on");
  } else {
    markIcon.style.visibility = "hidden";
    to_do_text.classList.remove("to_do_text_on");
    delButton.classList.remove("del_but_on");
    item.style.backgroundColor = "white";
  }
}

完整修复后的JS代码（以方案1为例） #

const addButton = document.getElementById("add_but");
const input = document.getElementsByTagName("input");
addButton.addEventListener("click", getText);
function getText() {
  //add item
  const item = document.createElement("div");
  item.classList.add("item");
  //add mark and text
  const markandText = document.createElement("div");
  markandText.classList.add("markandText");
  // add text
  const to_do_text = document.createElement("span");
  to_do_text.classList.add("to_do_text");
  // add markicon
  const markIcon = document.createElement("span");
  markIcon.classList.add("markIcon");
  markIcon.innerHTML = "✓";
  //add text and markicon to markandtext
  markandText.appendChild(to_do_text);
  markandText.appendChild(markIcon);
  // add button
  const delButton = document.createElement("button");
  delButton.classList.add("del_but");
  delButton.innerHTML = "&#10005";
  // add markandText and button to item
  item.appendChild(markandText);
  item.appendChild(delButton);
  const items = document.getElementById("items");

  // add item to items
  items.appendChild(item);
  if (input[0].value != "") {
    item.style.visibility = "visible";
    to_do_text.innerHTML = input[0].value;
  }
  item.addEventListener("click", addStrike);

  delButton.addEventListener("click", delFunc);
  function addStrike() {
    const isMarkVisible = markIcon.classList.contains('show');
    if (!isMarkVisible) {
      markIcon.classList.add('show');
      item.style.backgroundColor = "#888888";
      to_do_text.classList.add("to_do_text_on");
      delButton.classList.add("del_but_on");
    } else {
      markIcon.classList.remove('show');
      to_do_text.classList.remove("to_do_text_on");
      delButton.classList.remove("del_but_on");
      item.style.backgroundColor = "white";
    }
  }
  function delFunc() {
    item.style.display = "none";
  }
}

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