Javascript 当我试图创建事件侦听器要读取的元素时，控制台抛出undefined

我正在尝试创建一个todo list webapp，作为javascript的基本训练场地，但控制台会抛出错误，我可以找到答案。它说todo未定义，但我通过函数将其定义为要创建的div。我只是想把表单上的每一个输入都添加到我的无序列表中。我只使用样本值，而不是实际输入。我很困惑。谢谢你的帮助

//选择器
const todoInput=document.querySelector（“.todo输入”）；
const todoButton=document.querySelector（“todo按钮”）；
const todoList=document.querySelector（“todo列表”）；
//事件侦听器
addEventListener（'click'，addTodo）；
console.log（事件）；
//功能
函数addTodo（事件）{
//创建Todo Div
const todoDiv=document.createElement（“div”）；
todoDiv.classList.add（“todo”）；
//创造李
const newTodo=document.createElement（'li'）；
newTodo.innerText=“新任务”；
newTodo.classList.add（'todo-item'）；
托多迪夫·阿佩奇尔德（纽托多）；
//复选标记按钮
const completedButtton=document.createElement（'button'）；
completedButtton.innerHTML=''；
trashButtton.classList.add（'trash-btn'）；
托多迪夫·阿佩奇尔德（垃圾场）；
//添加到主ul类待办事项列表
托多利斯特。阿佩奇尔德（托多迪夫）；
};
*{
边距：0em；
填充：0em；
框大小：边框框；
背景图像：线性梯度（120度，#d4fc79 0%，#96e6a1 100%）；
}
身体{
文本对齐：居中；
背景图像：线性渐变（到顶部，#fbc2eb 0%，#a6c1ee 100%）；
颜色：rgb（0,0,0）；
}
标题，
形式{
最小高度：20vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
表格输入，
窗体按钮{
填充：0.5雷姆；
字号：2rem；
边界：无；
背景：#fff；
}
窗体按钮{
颜色：#96e6a1；
背景：白色；
光标：指针；
过渡：所有0.3秒缓解；
}
窗体按钮：悬停{
颜色：#ffffff；
背景色：#96e6a1；
}
工作列表
我的待办事项清单
享受这个方便的网站，你可以免费使用，特别是你的待办事项清单


这里是完整的
待办事项列表
。您的代码中需要进行大量更改

您没有使用
preventDefault
方法，这意味着每次添加新的
待办事项时都要重新加载页面

您使用的是正确的
类
前缀

您也不需要使用单独的函数来调用单击。您可以使用相同的
eventlistener
添加待办事项
此外，当添加待办事项时，您没有正确显示
检查
和
垃圾箱
图标
此外，一旦项目添加成功。理想的
方法是将输入设置为
null
，这样就可以添加另一个
项

演示：


//选择器
const todoButton=document.querySelector（“.todo按钮”）；
const todoList=document.querySelector（“.todo list”）；
//事件侦听器
todoButton.addEventListener（'单击'，（事件）=>{
event.preventDefault（）
//
const todoInput=document.querySelector（“.todo输入”）；
//创建Todo Div
const todoDiv=document.createElement（“div”）；
todoDiv.classList.add（“todo”）；
//创造李
const newTodo=document.createElement（'li'）；
newTodo.innerText=todoInput.value
newTodo.classList.add（'todo-item'）；
托多迪夫·阿佩奇尔德（纽托多）；
//复选标记按钮
const completedButtton=document.createElement（'button'）；
CompletedButton.innerHTML='您的
todoButton
和
todoList
选择器缺少类前缀
，因此
为null
。这就是我喜欢stackOverflow的原因，除了我很笨，除非其他人看到我有多笨，否则我无法说出我的代码有什么问题。非常感谢//事件侦听器todaddEventListener（'click'，（）=>{event.preventDefault（）@用户13705270很高兴帮助。请接受我帮助过的答案。我真的很感激这些提示。我会记住它们，我仍然远离现实。@AlwaysHelping和之前的那个家伙。似乎仍然需要改进，我甚至看到我的JS与bootstrap 4冲突。哈哈哈，但仍然能够学到一些小东西，你有什么提示吗orkflow在调试jS？@user13705270时是的，最好的便捷工具是始终查看
控制台日志
中的错误，如果
控制台中没有任何内容，但仍然无法工作，请逐行尝试
console.logging
查看代码停止工作的位置。