Todo List报错：Cannot read properties of undefined (reading 'value') 求助

问题根源 #

你在saveTodo函数里写的const todoValues = todoInput.add.value;是报错的核心原因：

• todoInput是通过document.getElementById('todoInput')获取的输入框DOM对象，它本身没有add这个属性，所以todoInput.add返回undefined，尝试读取undefined的value就会触发你遇到的错误。

修复方案 #

把错误的代码行改成直接读取输入框的value属性即可，还可以增加空值判断避免添加空任务：

function saveTodo() {
    // 移除多余的.add，直接读取输入框的value
    const todoValues = todoInput.value;

    // 过滤空内容，避免添加空白任务
    if (!todoValues.trim()) return;

    let values = {
        value: todoValues,
        checked: false,
        color: '#' + Math.floor(Math.random()*16777215).toString(16)
    }

    todos.push(values);
    // 清空输入框，提升用户体验
    todoInput.value = '';
}

额外优化建议 #

• 初始化时检查DOM元素是否获取成功，避免后续操作报错：

  const form = document.getElementById('todoForm');
  const todoInput = document.getElementById('todoInput');
  
  // 若元素不存在，直接终止并打印错误
  if (!form || !todoInput) {
      console.error('未找到表单或输入框元素，请检查ID是否正确');
      return;
  }
  

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