为什么我会在待办事项列表中复制待办事项？

Question

这是js代码

let form = document.getElementById('todoForm');
let input = document.getElementById('todoInput');
let btn = document.getElementById('btn');
let todos = [];


const loadTodos = () => {
  let parent = document.getElementById('todoList');
  todos.forEach(todo => {
    let newLi = document.createElement('li');
    newLi.innerHTML = `<li>${todo.text}</li>`
    parent.appendChild(newLi);
  })
}

btn.addEventListener('click', (e) => {
  e.preventDefault();
  let text = input.value;
  let todo = {
    id: todos.length + 1,
    text: text,
    complete: false,
  }
  todos.push(todo);
  loadTodos();
})


window.onload = () => {
  loadTodos();
}

当我第一次添加一个待办事项，它可以，但分段的时间将打印第一个待办事项再次包括分段。

示例：

1. first todo 2.first todo 3. 3.seconed todo

Answer 1

您应该做另一个函数来处理单个待办事项，下面是您更新的代码

let form = document.getElementById('todoForm');
let input = document.getElementById('todoInput');
let btn = document.getElementById('btn');
let todos = [];


const loadTodos = () => {
    let parent = document.getElementById('todoList');
    todos.forEach(todo => {
        let newLi = document.createElement('li');
        newLi.innerHTML = `<li>${todo.text}</li>`
        parent.appendChild(newLi);
    })
}

const renderNewToDo = (todo) => {
    let parent = document.getElementById('todoList');
    let newLi = document.createElement('li');
    newLi.innerHTML = `<li>${todo.text}</li>`
    parent.appendChild(newLi);
}

btn.addEventListener('click', (e) => {
    e.preventDefault();
    let text = input.value;
    let todo = {
        id: todos.length + 1,
        text: text,
        complete: false,
    }
    todos.push(todo);
    renderNewToDo(todo);
})


window.onload = () => {
    loadTodos();
}