如何验证TodoList输入值是否已存在并弹出SweetAlert提示避免重复添加

核心修改逻辑 #

• 先对输入内容做前后去空格处理，避免前后空格导致的重复内容误判
• 获取页面所有已存在的任务节点，提取每个任务的纯文本内容（排除delete按钮的文本干扰）
• 逐一比对输入内容和已存在的任务文本，匹配到重复内容直接弹出SweetAlert提示，终止后续新增逻辑

修改后的完整代码 #

let theinput = document.querySelector(".add-task input");
let theaddbutton = document.querySelector(".add-task .plus");
let taskscontainer = document.querySelector(".tasks-content");
let taskscount = document.querySelector(".tasks-count span");
let taskscompleted = document.querySelector(".tasks-completed span");

window.onload = () => {
  theinput.focus();
};

theaddbutton.onclick = () => {
  // 输入为空判断，增加trim处理避免全空格的无效输入
  if (theinput.value.trim() === '') {
    Swal.fire("你需要输入任务内容");
    theinput.focus();
    return;
  }

  // 新增重复校验逻辑
  const inputVal = theinput.value.trim();
  const allTasks = document.querySelectorAll(".task-box");
  let isDuplicate = false;
  allTasks.forEach(task => {
    // 取任务的纯文本（第一个子节点为任务文本节点，不包含delete按钮内容）
    if (task.firstChild.textContent.trim() === inputVal) {
      isDuplicate = true;
    }
  });
  if (isDuplicate) {
    Swal.fire("你已经添加过该任务了");
    theinput.focus();
    return;
  }

  // 原有新增任务逻辑
  let notasks = document.querySelector(".no-tasks");
  if (document.body.contains(document.querySelector(".no-tasks"))) {
    notasks.remove();
  }
  let mainspan = document.createElement('span');
  let deletespan = document.createElement('span');
  let text = document.createTextNode(theinput.value);
  let deletetext = document.createTextNode("delete");

  mainspan.appendChild(text);
  mainspan.className = 'task-box';

  deletespan.appendChild(deletetext);
  deletespan.className = 'delete';

  mainspan.appendChild(deletespan);
  taskscontainer.appendChild(mainspan);

  theinput.value = '';
  calctasks();
  theinput.focus();
};

补充说明：如果需要忽略大小写判定重复（比如"Buy milk"和"buy milk"算同一个任务），可将比对代码修改为 if (task.firstChild.textContent.trim().toLowerCase() === inputVal.toLowerCase()) 即可。

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