Javascript 如何按类捕获元素并单击它？

我试着做一个游戏，其中一个绿色的方块在一个随机的地方出现2秒钟，然后消失，再次在不同的地方使用长矛。如果用户单击绿色方框，则他们将获得一分。当他们点击一个白色的方块，他们就失去了生命

我不知道如何在Javascript代码中检索绿色方块。我想我应该给绿色方块类

绿色

和白色方块类

白色

，然后这样做：

document.getElementsByClassName('green').onclick(() => {
    //give the user a point
}

document.getElementsByClassName('white').onclick(() => {
    //user loses a life
}

…但不幸的是，它不起作用

你知道为什么吗？我怎么做

您可以在此处看到游戏的外观：

…和整个script.js，请参见：

let start=document.getElementById（'start'）；
//在这里，我创建了一个包含5行5个正方形的板
const makeBoard=（）=>{
让board=''；
对于（i=0；i<5；i++）{
让row=''；
对于（j=0；j<5；j++）{
设numer=5*i+j；
行+=``；
};
行=行+“”；
线路板+=行；
}
document.getElementById（'board'）。innerHTML=board；
}
//在这里，我随机化的绿色广场应该在哪里
常数随机平方=（）=>{
让randId='sq'+Math.floor（Math.random（）*25）；
document.getElementById（randId）.className+=“绿色”；
设置超时（（）=>{
document.getElementById（randId.style.backgroundColor='white'；
}, 2000);
}
//董事会
makeBoard（）；
start.onclick=（）=>{
随机平方（）；
设置间隔（（）=>{
随机平方（）；
}, 3000);
倒计时（）；
};
//时间在倒数计时（60瑞典克朗）
常量倒计时=（）=>{
让计数=60；
让timerCounter=setInterval（（）=>{
计数--；
document.getElementById（'time'）.innerHTML=count；
如果（计算）
您需要循环遍历元素并单独添加事件处理程序

Array.from(document.getElementsByClassName('white')).forEach(ele=>ele.onclick(() => {
    //user loses a life
});

将为您提供一个包含类中所有元素的数组。若要访问此类中的一个元素，您需要使用索引。如果数组中只有一个元素，则可以使用索引

const firstElement = allElementsWithClass[0];
firstElement.onclick(() => {/* user loses a life here */});

如果要为类中的每个元素设置onclick

allElementsWithClass.forEach(element=>{element.onclick(()=>{/* user loses a life here*/})})

使用event.target并在电路板上单击收听

document.getElementById("board").addEventListener("click",(e) => {
  var tgt = e.target;
  if (!tgt.classList.contains("square")) return;
  if (tgt.classList.contains("green")) {
    console.log("Win a point")
  }
  else {
    console.log("Lose a life")
  }
});


let start=document.getElementById（'start'）；
//在这里，我创建了一个包含5行5个正方形的板
const makeBoard=（）=>{
让board=''；
对于（i=0；i<5；i++）{
让row=''；
对于（j=0；j<5；j++）{
设numer=5*i+j；
行+=``；
};
行=行+“”；
线路板+=行；
}
document.getElementById（'board'）。innerHTML=board；
}
//在这里，我随机化的绿色广场应该在哪里
常数随机平方=（）=>{
让randId='sq'+Math.floor（Math.random（）*25）；
document.getElementById（randId）.className+=“绿色”；
设置超时（（）=>{
document.getElementById（randId.style.backgroundColor='white'；
}, 2000);
}
//董事会
makeBoard（）；
start.onclick=（）=>{
随机平方（）；
设置间隔（（）=>{
随机平方（）；
}, 3000);
倒计时（）；
};
//时间在倒数计时（60瑞典克朗）
常量倒计时=（）=>{
让计数=60；
让timerCounter=setInterval（（）=>{
计数--；
document.getElementById（'time'）.innerHTML=count；
如果（计算）{
var tgt=e.target；
如果（！tgt.classList.contains（“square”））返回；
if（tgt.classList.contains（“绿色”））{
console.log（“赢得一分”）
}
否则{
console.log（“失去生命”）
}
})；
正文{
文本对齐：居中；
字体系列：警告；
字体大小：32px；
}
/*标题*/
#标题{
显示器：flex；
证明内容：中心；
最小宽度：810px；
宽度：90%；
保证金：20px自动；
}
.box\u在\u标题中{
宽度：270px；
}
.bold{
字体大小：粗体；
}
#柜台{
显示器：flex；
}
.柜台{
利润率：0.20px；
}
#时间，生命，积分{
显示：内联；
}
/*普朗萨*/
#容器{
显示：内联块；
证明内容：中心；
最小宽度：810px；
保证金：20px自动；
}
#警觉的{
高度：40px；
颜色：rgb（18、156、87）；
边缘底部：10px；
}
#董事会{
位置：相对位置；
}
.行{
显示器：flex；
证明内容：中心；
}
.广场{
宽度：40px；
高度：40px；
边框：1px纯黑；
保证金：5px；
光标：指针；
背景色：白色；
}
#游戏结束了{
显示：无；
宽度：810px；
高度：270px；
背景色：rgba（255255,0.7）；
位置：绝对位置；
顶部：150px；
}
格林先生{
背景色：rgb（18、156、87）；
}
怀特先生{
背景色：白色；
}
/*开始我重置*/
#启动复位{
显示器：flex；
证明内容：中心；
利润率：10px自动；
}
#开始{
利润率：0.40px；
光标：指针；
}
#重置{
利润率：0.40px；
光标：指针；
}

生活：
3.
要点：
0
反射动作
时间：
60瑞典克朗
抓住绿色广场！
开始
重置
document.getElementById（'white'）
与getElementsByCassName不同。在我看来，您正在学习JS，需要仔细了解选择元素的选项：
document.querySelectorAll（）
是您可以使用的。抱歉，我犯了一个错误，我认为getElementByClassName是错误的，但我写错了
getElementsByClassName
不是一个方法。
getElementsByClassName
但是，返回的是一个HTMLCollection，而不是节点列表，它没有实现
forEach
。我编写了
const squares=document.getElementsByClassName
sName（'white'）；const firstElement=squares[0]；firstElement.onclick（（）=>{console.log（'ok'）}）；

但我接收>firstElement.onclick不是一个函数我没有因为不支持IE而投票反对。我投票反对在可以委托的情况下对所有元素进行不优雅的循环

document.getElementById("board").addEventListener("click",(e) => {
  var tgt = e.target;
  if (!tgt.classList.contains("square")) return;
  if (tgt.classList.contains("green")) {
    console.log("Win a point")
  }
  else {
    console.log("Lose a life")
  }
});