TODO列表开发问题：点击提交按钮后页面重置内容消失

嘿，我一眼就看出问题所在啦——点击提交后页面刷新导致新增内容全没了，主要是两个小问题在搞鬼，咱们一步步来修复：

问题根源 #

1. 表单默认提交行为：当你点击type="submit"的按钮时，浏览器会自动触发表单的默认提交逻辑，直接刷新页面，这就是所有内容消失的核心原因。
2. 事件绑定方式错误：你用字符串形式绑定onClick的写法不仅过时，还没法正确传递参数和阻止默认行为，很容易出问题。

修复方案 #

咱们修改newTodo()和submitTodo()函数，同时补上阻止默认提交的逻辑：

第一步：修正事件绑定与阻止页面刷新 #

把提交按钮的事件绑定改成更可靠的addEventListener，并在表单提交时阻止默认行为：

function newTodo() {
  var newTODO = document.createElement("LI")
  newTODO.id = 'newTODOListItem'
  list.appendChild(newTODO)
  
  var form = document.createElement("FORM")
  form.id = 'TODOList'
  newTODO.appendChild(form)
  
  var x = document.createElement("INPUT")
  x.type = 'text'
  x.id = 'newTODOText'
  x.name = 'name1'
  form.appendChild(x)
  
  var y = document.createElement("INPUT")
  y.type = 'submit'
  y.value = 'Submit'
  
  // 用addEventListener绑定表单提交事件，替代字符串式的onClick
  form.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为，彻底避免页面刷新
    e.preventDefault();
    // 调用提交处理函数，传递所需参数
    submitTodo(newTODO, form, x.value);
  })
  
  form.appendChild(y)
}

第二步：完善submitTodo函数（可选优化） #

原来的函数能完成基础功能，咱们可以加个输入校验，再补上TODO项的复选框和删除按钮，让应用更完整：

function submitTodo(newTODO, TODOList, taskText) {
  // 先校验输入内容，避免空项
  if (!taskText.trim()) {
    alert("请输入具体的TODO内容哦！");
    return;
  }
  
  // 移除表单元素
  newTODO.removeChild(TODOList);
  
  // 创建TODO文本元素，复用预设的class名保持样式统一
  var todoText = document.createElement("SPAN");
  todoText.className = classNames.TODO_TEXT;
  todoText.textContent = taskText;
  
  // 添加复选框，绑定状态变更事件更新未完成计数
  var checkbox = document.createElement("INPUT");
  checkbox.type = "checkbox";
  checkbox.className = classNames.TODO_CHECKBOX;
  checkbox.addEventListener('change', function() {
    uncheckedCountSpan.textContent = parseInt(uncheckedCountSpan.textContent) + (this.checked ? -1 : 1);
  })
  
  // 添加删除按钮，绑定删除逻辑并更新计数
  var deleteBtn = document.createElement("BUTTON");
  deleteBtn.className = classNames.TODO_DELETE;
  deleteBtn.textContent = "删除";
  deleteBtn.addEventListener('click', function() {
    list.removeChild(newTODO);
    itemCountSpan.textContent = parseInt(itemCountSpan.textContent) - 1;
    if (!checkbox.checked) {
      uncheckedCountSpan.textContent = parseInt(uncheckedCountSpan.textContent) - 1;
    }
  })
  
  // 组装TODO项的所有元素
  newTODO.className = classNames.TODO_ITEM;
  newTODO.appendChild(checkbox);
  newTODO.appendChild(todoText);
  newTODO.appendChild(deleteBtn);
  
  // 更新总任务数和未完成任务数
  itemCountSpan.textContent = parseInt(itemCountSpan.textContent) + 1;
  uncheckedCountSpan.textContent = parseInt(uncheckedCountSpan.textContent) + 1;
}

为什么这样改？ #

• e.preventDefault()：直接切断了表单默认的刷新逻辑，这是解决内容消失的关键。
• addEventListener：比字符串式绑定更灵活可靠，能正确传递上下文和参数，后续维护也更方便。
• 新增的复选框和删除按钮：让你的TODO应用功能更完整，同时同步更新计数显示，提升用户体验。

现在再测试一下，点击「New TODO」输入内容提交后，页面不会再刷新，新增的TODO项也会稳稳留在列表里啦！

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