使用数组与循环实现Todo List时重复显示问题求助

问题原因 #

你的代码每次点击"Add"按钮时，会遍历整个names数组并将每一项的HTML追加到容器的innerHTML中。比如第一次添加"Todo1"，页面显示1项；第二次添加"Todo2"时，循环会遍历数组的2个元素，把"Todo1"和"Todo2"都追加进去，最终页面就会出现重复的"Todo1"。

解决方案 #

方案一：重新生成完整列表（推荐，逻辑清晰） #

每次添加新todo后，清空之前的HTML，重新遍历数组生成完整的列表HTML，再替换容器的内容：

let names = []

function handleAddTodo(){
  const todo_input = document.querySelector('.js-input-todo');
  const todoValue = todo_input.value.trim(); // 去除首尾空格，避免空项
  const result = document.querySelector('.todo-list');

  // 空输入不处理
  if (!todoValue) return;

  names.push(todoValue);
  
  // 重新生成完整的列表HTML
  let todoListHTML = '';
  for(let i = 0; i < names.length ; i++){
    let todoName = names[i];
    todoListHTML += `<p>${todoName}</p>`;
  }
  
  // 替换容器内容，而不是追加
  result.innerHTML = todoListHTML;
  
  todo_input.value = '';
}

方案二：仅添加新的Todo项（性能更优） #

如果数组很大，重新生成整个列表可能影响性能，此时可以只把新添加的todo项直接追加到容器中，不需要遍历整个数组：

let names = []

function handleAddTodo(){
  const todo_input = document.querySelector('.js-input-todo');
  const todoValue = todo_input.value.trim();
  const result = document.querySelector('.todo-list');

  if (!todoValue) return;

  names.push(todoValue);
  
  // 仅创建新todo的HTML并追加
  const newTodoHTML = `<p>${todoValue}</p>`;
  result.innerHTML += newTodoHTML;
  
  todo_input.value = '';
}

额外优化建议 #

• 添加trim()去除输入的首尾空格，避免添加空的todo项
• 可以添加重复项判断，避免添加相同内容的todo：

  if (names.includes(todoValue)) {
    alert('该Todo已存在');
    return;
  }
  

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