Javascript 如何以单个元素为目标动态创建按钮

我的印象是，如果我们以类名的元素名为目标，那么它将适用于所有元素或具有该类名的元素。但是在下面的代码中，当我单击一个按钮时，它只会更改最近的span元素的innerHTML，即使我已经通过选择button元素添加了事件侦听器。请澄清。谢谢

constmyarray=[0,1,2]；
让myContainer=document.querySelector（'.container'）；
const newArray=myArray.map（（项）=>{
让newArticle=document.createElement（'article'）；
常量myHTML=`
单击${item}
`;
newArticle.innerHTML=myHTML；
让myBtn=newArticle.querySelector（'button'）；
myBtn.addEventListener（'单击'，（e）=>{
newArticle.querySelector（'span'）.innerHTML='clicked'；
})
返回新文章；
});
newArray.forEach（（项）=>{
myContainer.appendChild（项目）；
});


返回newArticle中的第一个按钮

let myBtn = document.querySelectorAll('button'); 

返回文档中的所有按钮

您可以通过单击每个按钮告诉我们您的期望值？
document.querySelectorAll（“.container”）返回一个srray。因此，与该类匹配的第一个元素是
document.getElementByClassName（“容器”）[0]
或
document.querySelectorAll（'.container'）[0]
。请尝试在此服务器上使用数组forEach方法。请注意，我使用了
document.querySelectorAll
。您之所以选择closes
span
，是因为您在此处查找
span
内部文章：
newArticle.querySelector（'span'）
。将其更改为
文档。查询选择器（'span'）
将找到所有
span
元素。@MasterMind
querySelectorAll
返回一个数组，而不是
querySelector
：）@BrunoMonteiro right。抱歉。你为什么要在
文章
中创建
文章
？
let myBtn = document.querySelectorAll('button');