Javascript addEventlistener（）不执行函数

我最近开始学习Javascript，目前正在构建一个程序，您可以在其中添加TODO，然后完成它们。但是，我无法使用addEventlistener（）方法

其思想是，当您单击“完成”时！，其中一个TODO消失，未检查的TODO数量减少1。但是，当我尝试添加按钮以完成TODO时，该按钮不起作用。我尝试过改变很多东西，但结果都是一样的，addEventlistener似乎没有调用done（）函数

我该怎么办

const类名称={
待办事项：“待办事项容器”，
待办事项复选框：“待办事项复选框”，
待办事项文字：“待办事项文字”，
待办事项删除：“待办事项删除”，
}
设uncheckedItems=0
设itemNumber=0
const list=document.getElementById（'todo-list'）
const itemCountSpan=document.getElementById（'item-count'）
const uncheckedCountSpan=document.getElementById（'unchecked-count'）
var button=document.createElement（'按钮'）
button.innerHTML='完成！'
// 3. 添加事件处理程序
按钮。addEventListener（“单击”，完成）
函数完成（）{
未勾选项-=1
uncheckedCountSpan=uncheckedItems
}
函数newTodo（）{
增量（）
newItem（）
}
函数increment（）{//此函数增加总TODO数和未检查TODO数
itemNumber+=1
未勾选项+=1
itemCountSpan.innerHTML=itemNumber
uncheckedCountSpan.innerHTML=uncheckedItems
}
函数newItem（）{
list.innerHTML+=classNames.TODO_TEXT
list.appendChild（按钮）
list.innerHTML+=“
”
}

*{
框大小：边框框；
}
html，
身体{
背景色：#eee；
保证金：0；
填充：0；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
.中心{
自对准：居中；
}
.流动权利{
显示器：flex；
证明内容：周围的空间；
}
.集装箱{
最大宽度：800px；
保证金：0自动；
填充：10px；
显示器：flex；
弯曲方向：立柱；
背景色：白色；
高度：100vh；
}
标题
.控制，
.按钮{
flex：无；
}
.按钮{
填充：10px 20px；
}
.待办事项清单{
弹性：110；
边缘顶部：20px；
填充：20px；
溢出y：自动；
左缘：20%；
}
.todo删除{
利润率：10px；
}
.待办事项复选框{
利润率：10px；
}
.todo集装箱{
填充：20px；
边框底部：1px实心#333；
}
.todo容器：类型的第一个{
边框顶部：1px实心#333；
}
钮扣{
浮动：对；
右边距：0%；
}

待办事项应用程序
我的待办事项应用程序
项目计数：0
未选中计数：0
新待办事项

您是否将按钮添加到DOM？我看到你们在听这个按钮，它创建了DOM，但并没有附加到DOM中

尝试执行任务。预先结束（按钮）

您应该委派

在这里，我还为todo添加了一个LI，并在完成后删除该按钮

我为每个LI创建一个按钮

有一些时髦的CSS正在进行，所以我补充说

.todo-list li { padding:3px }

工作示例

const类名称={
待办事项：“待办事项容器”，
待办事项复选框：“待办事项复选框”，
待办事项文字：“待办事项文字”，
待办事项删除：“待办事项删除”，
}
设uncheckedItems=0
设itemNumber=0
const list=document.getElementById（'todo-list'）
const itemCountSpan=document.getElementById（'item-count'）
const uncheckedCountSpan=document.getElementById（'unchecked-count'）
list.addEventListener（“单击”，函数（e）{
常数tgt=e.target；
const parent=tgt.parentNode；
if（tgt.classList.contains（“done”））{
未勾选项-=1
uncheckedCountSpan.innerHTML=uncheckedItems；
tgt.remove（）
parent.innerHTML=''+parent.textContent+''
}
})
document.getElementById（“newtodo”）.addEventListener（“单击”，函数（）{
增量（）
newItem（）
})
函数increment（）{//此函数增加总TODO数和未检查TODO数
itemNumber+=1
未勾选项+=1
itemCountSpan.innerHTML=itemNumber
uncheckedCountSpan.innerHTML=uncheckedItems
}
函数newItem（）{
var button=document.createElement（'button'）；
按钮。类列表。添加（“完成”）；
button.innerHTML='完成！'
设li=document.createElement（“li”）；
li.innerHTML+=classNames.TODO_文本
li.appendChild（按钮）
列表.附加子项（li）
}

*{
框大小：边框框；
}
html，
身体{
背景色：#eee；
保证金：0；
填充：0；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
.中心{
自对准：居中；
}
.流动权利{
显示器：flex；
证明内容：周围的空间；
}
.集装箱{
最大宽度：800px；
保证金：0自动；
填充：10px；
显示器：flex；
弯曲方向：立柱；
背景色：白色；
高度：100vh；
}
标题
.控制，
.按钮{
flex：无；
}
.按钮{
填充：10px 20px；
}
.待办事项清单{
弹性：110；
边缘顶部：20px；
填充：20px；
溢出y：自动；
左缘：20%；
}
.todo删除{
利润率：10px；
}
.待办事项复选框{
利润率：10px；
}
.todo集装箱{
填充：20px；
边框底部：1px实心#333；
}
.todo容器：类型的第一个{
边框顶部：1px实心#333；
}
.todo列表li{padding:3px}
钮扣{
浮动：对；
右边距：0%；
}

待办事项应用程序
我的待办事项应用程序
项目计数：0
未选中计数：0
新待办事项

列表。追加孩子（按钮）

谢谢您的帮助！我想知道我在代码中做错了什么，如果有比你使用的更简单的方法来解决这个问题…解决哪个问题？强烈建议使用我的事件处理-它是一个处理动态列表中所有单击的处理程序。为什么使用downvote？ppl在没有任何评论的情况下投票否决，这令人困惑。这只是一记耳光，而不是值得学习的东西