Javascript addEventListener仅处理第一个元素

我正在做notes应用程序项目，但我被困在这一点上，addEventListener只为编辑按钮的第一个元素工作。第一个元素允许我编辑和保存，但第二个元素只允许编辑，但不保存为第一个元素。我只是一个初学者，非常感谢你的帮助。 我有以下代码：

const notesEl=document.querySelector（“.notes”）；
const editBtn=document.querySelector（“.edit”）；
const deleteBtn=document.querySelector（“.delete”）；
const addNoteBtn=document.querySelector（“.add note”）；
常量main=notesEl.querySelector（“.main”）；
const textArea=notesEl.querySelector（“textArea”）；
editBtn.addEventListener（“单击”，（）=>{
console.log（'Helll'）；
main.classList.toggle（“隐藏”）；
textArea.classList.toggle（“隐藏”）；
});
textArea.addEventListener（“输入”，（e）=>{
const{value}=e.target；
main.innerHTML=已标记（值）；
});
addNoteBtn.addEventListener（“单击”，（）=>{
const newNotesEl=document.createElement（“div”）；
newNotesEl.classList.add（“注释”）；
newNotesEl.innerHTML=`
`;
document.body.appendChild（newNotesEl）；
});
正文{
背景色：#7bdaf3；
显示器：flex；
柔性包装：包装；
字体系列：“罂粟花”，无衬线；
最小高度：100vh；
保证金：0；
}
.添加注释{
背景色：#9ec862；
颜色：#fff；
位置：固定；
顶部：1rem；
右：1rem；
边界：无；
填充：0.5雷姆；
边界半径：4px；
字号：1.2rem；
}
.添加图标{
左边距：4倍；
}
.注释{
背景色：#fff；
宽度：380px；
高度：400px；
利润率：60像素20像素；
}
.notes.notes工具{
背景色：#9ec862；
显示器：flex；
证明内容：柔性端；
填充：0.5雷姆；
}
.notes.notes工具按钮{
背景色：透明；
颜色：#fff；
边界：无；
字号：1rem；
左边距：0.5雷姆；
}
.notes.main{
身高：100%；
宽度：100%；
}
.notes文本区{
大纲：无；
字体家族：继承；
边界：无；
身高：100%；
宽度：100%；
}
.注释.隐藏{
显示：无；
}

添加注释
更新
DOM时，需要再次添加事件侦听器

调用
document.body.appendChild（newNotesEl）之后
，在
newNotesEl
中的
edit
类上添加事件侦听器-

document.body.appendChild(newNotesEl);

newNotesEl.querySelector('.edit').addEventListener("click", () => {
  console.log('Helll');
  main.classList.toggle("hidden");
  textArea.classList.toggle("hidden");
});

您可以将事件代码提取到函数中，因此无需重复代码


const notesEl=document.querySelector（“.notes”）；
const editBtn=document.querySelector（“.edit”）；
const deleteBtn=document.querySelector（“.delete”）；
const addNoteBtn=document.querySelector（“.add note”）；
常量main=notesEl.querySelector（“.main”）；
const textArea=notesEl.querySelector（“textArea”）；
editBtn.addEventListener（“单击”，（）=>{
console.log（'Helll'）；
main.classList.toggle（“隐藏”）；
textArea.classList.toggle（“隐藏”）；
});
textArea.addEventListener（“输入”，（e）=>{
常数{
价值
}=e.目标；
main.innerHTML=已标记（值）；
});
addNoteBtn.addEventListener（“单击”，（）=>{
const newNotesEl=document.createElement（“div”）；
newNotesEl.classList.add（“注释”）；
newNotesEl.innerHTML=`
`;
document.body.appendChild（newNotesEl）；
newNotesEl.querySelector（'.edit'）.addEventListener（“单击”，（）=>{
console.log（'Helll'）；
main.classList.toggle（“隐藏”）；
textArea.classList.toggle（“隐藏”）；
});
});
正文{
背景色：#7bdaf3；
显示器：flex；
柔性包装：包装；
字体系列：“罂粟花”，无衬线；
最小高度：100vh；
保证金：0；
}
.添加注释{
背景色：#9ec862；
颜色：#fff；
位置：固定；
顶部：1rem；
右：1rem；
边界：无；
填充：0.5雷姆；
边界半径：4px；
字号：1.2rem；
}
.添加图标{
左边距：4倍；
}
.注释{
背景色：#fff；
宽度：380px；
高度：400px；
利润率：60像素20像素；
}
.notes.notes工具{
背景色：#9ec862；
显示器：flex；
证明内容：柔性端；
填充：0.5雷姆；
}
.notes.notes工具按钮{
背景色：透明；
颜色：#fff；
边界：无；
字号：1rem；
左边距：0.5雷姆；
}
.notes.main{
身高：100%；
宽度：100%；
}
.notes文本区{
大纲：无；
字体家族：继承；
边界：无；
身高：100%；
宽度：100%；
}
.注释.隐藏{
显示：无；
}

添加注释
您必须使用querySelectorAll（）选择所有元素，然后使用loop。
querySelector选择匹配的第一个元素。您需要
querySelectorAll
来选择所有匹配项。