JavaScript报错Uncaught ReferenceError: addToDoButton is not defined的问题排查求助

嘿，这个错误其实是几个变量名和元素匹配的小疏忽导致的，我帮你拆解一下问题所在：

核心错误点 #

• 变量名不匹配：你在JavaScript里定义的变量是addToDo，但后续绑定点击事件时用的是addToDoButton——这个变量压根没被声明过，浏览器自然会报“未定义”的错误。
• 元素ID匹配错误：你用document.getElementById("edit_button")去获取按钮，但HTML里按钮的实际ID是addToDo，这会导致addToDo变量拿到的是null，就算变量名对了也没法绑定事件。
• 额外小问题：删除待办项的代码里，paragraph.removeChild(paragraph)是错误写法——removeChild需要从父元素调用，你可以直接用paragraph.remove()来删除元素自身；另外输入框清空时写了" "（带空格），应该改为""才能真正清空内容。

修正后的代码 #

JavaScript部分 #

// 修正：获取正确ID的按钮，变量名和后续使用保持一致
let addToDoButton = document.getElementById("addToDo");
let toDoContainer = document.getElementById("toDoContainer");
let inputField = document.getElementById("inputField");

addToDoButton.addEventListener("click", function() {
  var paragraph = document.createElement("p");
  paragraph.classList.add("paragraph-styling");
  paragraph.innerText = inputField.value;
  toDoContainer.appendChild(paragraph);
  // 修正：真正清空输入框内容
  inputField.value = "";
  
  paragraph.addEventListener("click", function() {
    paragraph.style.textDecoration = "line-through";
  })
  
  // 修正：删除元素的正确写法
  paragraph.addEventListener("dblclick", function() {
    paragraph.remove();
  })
})

HTML部分（修正CSS链接的语法小问题） #

<html>
<head>
  <!-- 修正：link标签里不需要加逗号 -->
  <link rel="stylesheet" href="style.css">
  <h1 class="tdl_header">TO DO LIST</h1>
</head>
<body class="body">
<div class="container">
  <input id="inputField" type="text" placeholder="add your list">
  <button id="addToDo"> + </button>
  <div class="to-dos" id="toDoContainer">
  </div>
</div>
<script src="to_do_list.js"></script>
</body>
</html>

这样调整后，你的待办列表功能应该就能正常运行啦～

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