javascript点击游戏使用较少的html

Question

我正在制作一个基本的 javascript 游戏，您需要在特定时间段内单击多个图像。 (当前为 4 秒)

我的 JavaScript 看起来像这样

document.getElementById("myBtn").addEventListener("click", countdown);
function countdown() {
setTimeout(function(){ 
prompt("you got" + counter);   
}, 4000);

}

var counter = 0;
function countup() {
counter = counter + 1;
}

虽然这确实有效，但我的 HTML 中的每个 img 都必须具有:

onclick="countup(); this.onclick=null"

20张照片已经很多了。我的问题是，有没有办法浓缩这个？一些js方法按类收集所有图片并对其应用点击计数和null？

Answer 1

您可以使用 document.querySelectorAll() 选择所有图像并添加事件监听器来计数并删除事件监听器，如下所示:

function handleClick(e)
{
    countup();
    e.target.removeEventListener('click', handleClick);
}

var images = document.querySelectorAll('img'); 
for (var i = 0; i < images.length; i++) 
{
    images[i].addEventListener('click', handleClick);
}

有关 document.querySelectorAll 的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

您还可以在 querySelectorAll 中使用类名，传入“.myClass”