Javascript 我对'有问题；完成'；按钮'；s单击我的待办事项应用程序上的事件

我想从javascript创建一个简单的待办事项列表。一切似乎都很好，但功能无法正常工作。我使用for循环遍历列表中的每个按钮，并在单击时启动事件侦听器。问题是，当列表中有多个项目时，如果我在第一个元素上单击“完成”，则不会触发所需的类，即“行”。然而，底部的列表似乎运行正常

const add=document.getElementById（'add'）；
let list=document.querySelector（“#list”）；
让task=document.getElementById（'task'）；
//处理按钮的函数
功能把手按钮（）{
让allSpan=document.queryselectoral（'span'）；
让allList=document.queryselectoral（'li'）；
const doneButton=document.queryselectoral（'.done'）；
const deleteButton=document.querySelectorAll（'.delete'）；
for（设i=0；i
*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Poppins”，无衬线；
}
ul{列表样式：无；}
梅因先生{
最小高度：100vh；
填充顶部：100px；
背景色：rgb（231231230）；
}
.集装箱{
位置：相对位置；
文本对齐：居中；
排名前10%；
转化：translateY（-10%）；
宽度：100%；
保证金：自动；
}
.集装箱h1{
边缘底部：20px；
字体大小：2.7rem；
文本转换：大写；
字母间距：5px；
字距：5px；
颜色：rgb（231,96,96）；
}
.容器输入{
边界：无；
字体大小：1.5rem；
填充：4px8px；
边界半径：4px；
宽度：50%；
大纲：无；
}
.容器按钮{
字体大小：1.5rem；
边界：无；
光标：指针；
填充：3px8px；
宽度：20%；
背景色：rgb（15922165）；
过渡：.5s；
大纲：无；
}
.容器按钮：悬停{
背景色：rgb（1317721）；
颜色：rgb（233225225）；
}
.名单{
边缘顶部：20px；
宽度：72%；
保证金：自动；
填充：30px 10px；
字号：18px；
文本对齐：开始；
}
李先生{
显示器：flex；
字号：21px；
边缘底部：20px；
填充：14px 20px；
背景颜色：浅灰色；
证明内容：之间的空间；
对齐项目：居中；
}
#李斯潘{
宽度：40%；
}
。列表。删除{
背景色：rgb（231,63,63）；
宽度：40%；
利润率：10px；
字号：18px；
}
.list.delete:悬停{
背景色：rgb（230,28,28）；
}
.列表，完成{
背景色：rgb（12185113）；
宽度：40%；
利润率：10px；
字号：18px；
}
.list.done:悬停{
背景色：rgb（516859）；
}
.违约{
文字装饰：无；
}
p、 线{
文字装饰：线条贯通；
}
李，藏起来{
显示：无；
}
@介质（最大宽度：790px）{
#任务{
字体大小：14px；
宽度：67%；
}
#加{
字体大小：14px；
}
.列表跨度{
宽度：50%；
显示器：flex；
证明内容：周围的空间；
}
.名单{
宽度：95%；
}
李先生{
字体大小：10px；
}
.列表，完成{
宽度：78%；
字体大小：10px；
}
。列表。删除{
宽度：78%；
字体大小：10px；
}
}

待办事项
待办事项清单
添加


@Prashanth

请查看此问题的快速答案。我已经修改了下面的app.js。我删除了把手按钮功能

const add = document.getElementById('add');
let list = document.querySelector('#list');
let task = document.getElementById('task');

// Add Lists
function addList(){
if(task.value !== ''){
let li = document.createElement('li');
let p =document.createElement('p')
p.classList.add('default')
let t = document.createTextNode(task.value);
p.appendChild(t);
// create a span for the buttons
let span = document.createElement('span');
let doneBtn = document.createElement('button');
let doneTxt = document.createTextNode('Done');
let deleteBtn = document.createElement('button');
let deleteTxt = document.createTextNode('Delete');

doneBtn.addEventListener('click',function(){
    p.classList.toggle('line');
});

deleteBtn.addEventListener('click',function(){    
    li.classList.add('hide');
});
doneBtn.appendChild(doneTxt);
doneBtn.classList.add('done');
deleteBtn.appendChild(deleteTxt);
deleteBtn.classList.add('delete');

li.appendChild(p);
span.appendChild(doneBtn);
span.appendChild(deleteBtn);
li.appendChild(span);
list.appendChild(li);
// console.log(list)
// reset the input 
task.value = '';
}
else{
    alert('Enter a task!')
}
}
// Event Listeners
add.addEventListener('click',addList);

问题是一次单击触发了所有按钮的点击事件。
要为新项分配onclick，您需要迭代完整的元素，这不是一个好的做法