JavaScript待办列表新增项文本不更新问题排查求助

最可能的原因：复用了同一个DOM元素 #

你大概率是把创建<span>的代码写在了todo()函数外面，导致每次新增待办项时，都是修改同一个<span>的内容，再把它挪到新的<li>里。DOM元素在页面里只能存在一个位置，所以之前的项会“丢失”这个<span>，所有项最终显示的都是最后一次输入的内容。

举个错误代码的例子：

// 全局定义span，每次都用同一个
const todoSpan = document.createElement('span');
const todoInput = document.querySelector('#todo-input');
const todoList = document.querySelector('#todo-list');

function todo() {
  const title = todoInput.value;
  todoSpan.textContent = title;
  
  const newLi = document.createElement('li');
  newLi.appendChild(todoSpan);
  todoList.appendChild(newLi);
}

其他可能的原因 #

• 没实时获取输入值：如果你在页面加载时就把输入框的value存到了变量里，之后没重新获取，那每次用的都是初始值或者上一次的旧值。
• 选择器错了：如果新增的<li>里不小心用了和输入框一样的id或选择器，querySelector可能会拿到新的空输入框，导致内容不更新。

修复方法 #

针对复用DOM元素的问题 #

把创建<span>的代码移到todo()函数内部，每次新增都生成一个全新的<span>：

const todoInput = document.querySelector('#todo-input');
const todoList = document.querySelector('#todo-list');

// 绑定回车事件
todoInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && todoInput.value.trim()) {
    todo();
  }
});

function todo() {
  const title = todoInput.value.trim();
  // 每次都创建新的li和span
  const newLi = document.createElement('li');
  const todoSpan = document.createElement('span');
  
  todoSpan.textContent = title;
  newLi.appendChild(todoSpan);
  todoList.appendChild(newLi);
  
  // 清空输入框，方便下次输入
  todoInput.value = '';
}

针对其他问题 #

• 如果是没实时获取值：确保在todo()里每次都直接取todoInput.value，不要用提前缓存的变量。
• 如果是选择器错误：给输入框加个唯一的id（比如#main-todo-input），确保querySelector每次都拿到正确的输入框。

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