JavaScript任务表单出现Uncaught TypeError问题求助

错误原因 #

报错Uncaught TypeError: Cannot read properties of null (reading 'value')的核心问题是：你在JavaScript中获取输入框元素时，ID选择器漏掉了#符号：

const input = document.querySelector("new-task-input"); // 错误写法，缺少#

querySelector方法中，通过ID选择DOM元素必须以#开头，否则会被当作标签名去查找，自然找不到目标输入框，导致input变量值为null，后续读取input.value就触发了类型错误。

修复后的JavaScript代码 #

只需给ID选择器补上#即可：

window.addEventListener('load', () => {
    const form = document.querySelector("#new-task-form");
    const input = document.querySelector("#new-task-input"); // 修复：添加#
    const list_el = document.querySelector("#tasks");

    form.addEventListener('submit', (e) => {
        e.preventDefault();

        const task = input.value;
        
        if (!task) {
            alert("Please fill out the task");
        } else {
            console.log("Success");
        }
    })
})

后续避坑提示 #

• 使用querySelector/querySelectorAll时，严格遵循选择器规则：ID选择器带#，类选择器带.，标签选择器直接写标签名
• 可以提前判断元素是否存在，避免类似空值报错，示例：

  if (!input) {
      console.error("输入框元素未找到");
      return;
  }
  

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