Vanilla Js开发待办清单报Uncaught error todoDiv not defined如何解决

根因 #

todoDiv是你在addTodo函数内部用const声明的变量，属于函数作用域变量，仅能在addTodo的花括号内部被访问。你当前把todoList.appendChild(todoDiv)写在了函数外部，外部作用域无法读取到函数内部定义的局部变量，所以触发未定义报错。

修复操作 #

把todoList.appendChild(todoDiv)这行代码移动到addTodo函数内部，放在删除按钮创建完成、函数结束之前的位置即可。

修正后完整JS代码 #

同时给你修正了另一个隐藏问题：你之前给删除按钮和完成按钮设置了相同的complete-btn类名，后续绑定点击事件会无法区分两个按钮的功能，这里把删除按钮的类名调整为trash-btn，顺便优化了待办内容读取输入框值、追加后清空输入框的逻辑：

// 选择器
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

// 事件监听
todoButton.addEventListener('click', addTodo);

// 功能函数
function addTodo(event) {
  // 阻止表单默认提交刷新行为
  event.preventDefault();

  // 创建todo外层容器
  const todoDiv = document.createElement('div');
  todoDiv.classList.add('todo');

  // 创建todo内容li节点
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value; // 读取输入框填写的待办内容
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);

  // 清空输入框
  todoInput.value = '';

  // 创建完成按钮
  const completedButton = document.createElement('button');
  completedButton.innerHTML = '<i class ="fas fa-check"></i>';
  completedButton.classList.add('complete-btn');
  todoDiv.appendChild(completedButton);

  // 创建删除按钮
  const trashButton = document.createElement('button');
  trashButton.innerHTML = '<i class ="fas fa-trash"></i>';
  trashButton.classList.add('trash-btn'); // 修正类名避免和完成按钮冲突
  todoDiv.appendChild(trashButton);

  // 追加到todo列表
  todoList.appendChild(todoDiv);
}

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