我正在制作一个基本的 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?
最佳答案
您可以使用 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”
关于javascript点击游戏使用较少的html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33743105/