按钮单击事件不起作用
[英]Button Click Event not working
问题描述
我只是为单击侦听器编写了一些JS代码，如果在3秒钟内单击一个按钮超过5次，则警报会说您想要，否则就会迷路。 但是我每次都迷路了！
<head>
</head>
<body>
<button>Click!!</button>
<script>
let counter =0;
document.querySelector('button').addEventListener('Click', () => {
counter++;
});
setTimeout(() => {
if(counter > 5) {
alert('You Won!!' + counter);
} else {
alert('You Lost!!' + counter);
}
},3000)
</script>
</body>
5 个解决方案
解决方案1
1 2017-11-28 07:32:54
您可以使用小写的“点击”而不是“点击”，您没有在示例代码中随时调用点击事件。
解决方案2
1 2017-11-28 07:32:57
对源代码进行较小的更改。 现在工作正常。
let counter =0; document.querySelector('button').addEventListener('click', () =>counter++); setTimeout(() => { if(counter > 5) { alert('You Won!!' + counter); } else { alert('You Lost!!' + counter); } },3000)
.col { float: left; width: 20%; } .row { width: 100%; clear:both; display:block; }
<button>Click!!</button>
解决方案3
0 2017-11-28 07:28:10
效果很好，正在运行演示
我将“点击”更改为“点击”，仅小写。 addEventListener('click', () => {})
可能想签出： JavaScript事件侦听器区分大小写。
<button>Click!!</button>
<script>
let counter =0;
document.querySelector('button').addEventListener('click', () => {
counter++;
});
setTimeout(() => {
if(counter > 5) {
alert('You Won!!' + counter);
} else {
alert('You Lost!!' + counter);
}
},3000)
</script>
结果：
丢失 ：
赢了：
解决方案4
0 2017-11-28 07:30:20
我更新了代码，注意到了两件事，即您为点击事件使用了大写字母：
addEventListener('Click'
并且我还更改了if，如果计数器大于或等于5来提醒“您赢了”
if(counter >= 5)
这是一个工作的小提琴
解决方案5
0 2017-11-28 07:49:35
出于缓存原因，您应该使用外部JavaScript和CSS，但我认为您希望看到以下内容：
function lameGame(clickElement){
let c = 0;
setTimeout(() => {
if(c > 5) {
alert('You Won!!' + c); // never use alert in real world
}
else{
alert('You Lost!!' + c); // never use alert in real world
}
lameGame(clickElement);
}, 3000);
clickElement.onclick = function(){
c++;
}
}
lameGame(document.querySelector('button'));
点击事件按钮不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.