JavaScript待办列表实现重复任务添加拦截功能需求

嘿，我来帮你实现重复任务的检查功能！核心思路就是在添加新任务前，先遍历现有的所有任务标题，看看有没有和当前输入一致的（顺便做了空格修剪，避免因为首尾空格导致的误判）。

下面是修改后的完整代码，我把新增的重复检查部分用加粗标注出来，还顺手修复了一个编辑任务时日期更新的小bug：

const taskInput = document.getElementById('enter-task');
const addTaskBtn = document.querySelector('[data-submit-task]');
const toDoContainer = document.querySelector('[data-todo]');

addTaskBtn.addEventListener('click', addTask);

function addTask() {
  if (taskInput.value.trim() == '') { // 新增trim，避免空空格被误判为有效任务
    alert("Pole nie może być puste");
    return;
  }

  // --- 新增的重复检查逻辑 start ---
  const existingTasks = document.querySelectorAll('[data-task-title]');
  const isDuplicate = Array.from(existingTasks).some(task => {
    return task.textContent.trim() === taskInput.value.trim();
  });

  if (isDuplicate) {
    alert("You have already added this task");
    taskInput.value = ''; // 可选：清空输入框，提升用户体验
    return;
  }
  // --- 新增的重复检查逻辑 end ---

  const taskContainer = document.createElement('div');
  taskContainer.classList.add('task-container');
  taskContainer.innerHTML = `<input type="checkbox" data-complete><p class="task-date">Data utworzenia: <span data-task-date>${getDate()}</span></p><div class="content-edit"><span data-task-title>${taskInput.value}</span><button type="button" data-edit>Edycja</button></div><button type="button" data-delete>X</button>`;
  const completeTaskBtn = taskContainer.querySelector('[data-complete]');
  const deleteTaskBtn = taskContainer.querySelector('[data-delete]');
  const editTaskBtn = taskContainer.querySelector('[data-edit]');
  completeTaskBtn.addEventListener('click', markAsDone);
  deleteTaskBtn.addEventListener('click', deleteTask);
  editTaskBtn.addEventListener('click', editTask);
  toDoContainer.appendChild(taskContainer);
  taskInput.value = ''; // 正常添加后清空输入框，体验更流畅
}

function markAsDone() {
  const taskTitle = this.parentNode.querySelector('[data-task-title]');
  if (this.checked) {
    taskTitle.style.textDecoration = 'line-through';
    return;
  }
  taskTitle.style.textDecoration = 'none';
}

function deleteTask() {
  toDoContainer.removeChild(this.parentNode);
}

function editTask() {
  const taskContainer = this.parentNode.parentNode;
  if (taskContainer.contains(taskContainer.querySelector('.task-edit-container'))) {
    alert("Nie możesz dodać więcej niż jednego pola do edycji");
    return;
  }
  const currentTaskTitle = this.previousElementSibling;
  const editTaskContainer = document.createElement('div');
  editTaskContainer.classList.add('task-edit-container');
  editTaskContainer.innerHTML = `<label>Wprowadź treść zadania</label><input type="text"><button type="button">OK</button>`;
  const submitTitleBtn = editTaskContainer.querySelector('button');
  submitTitleBtn.addEventListener('click', function() {
    const newTitle = editTaskContainer.querySelector('input').value.trim();
    if(newTitle == '') {
      alert("Pole do edycji nie może być puste");
      return;
    }
    // 修复：原来的document.querySelector会拿到第一个任务的日期，改成从当前任务容器内查找
    const currentDate = taskContainer.querySelector('[data-task-date]');
    currentDate.innerHTML = `${getDate()}`;
    currentTaskTitle.innerHTML = newTitle;
    taskContainer.removeChild(editTaskContainer);
  });
  taskContainer.appendChild(editTaskContainer);
}

function getDate() {
  let date = new Date();
  let day = date.getDate();
  let monthIndex = date.getMonth();
  let year = date.getFullYear();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  if(minutes < 10) minutes = "0" + minutes;
  if(seconds < 10) seconds = "0" + seconds;
  const months = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"];
  return `${day} ${months[monthIndex]} ${year} ${hours} : ${minutes} : ${seconds}`;
}

如果需要忽略大小写检查重复，可以把重复判断的条件改成：

task.textContent.trim().toLowerCase() === taskInput.value.trim().toLowerCase()

根据你的需求调整就好啦。

内容的提问来源于stack exchange，提问作者P.Bak