循环内部的功能;功能工作不正常

Question

嗨：(我正试图使用Javascript创建一个游戏，它在屏幕上显示一个图像，然后，如果有人点击该图像，它应该会消失，过一段时间后，它会重新出现并重复这个过程5次。但当我运行代码时，它会自动增加"I"的数量。我放了"警报1"one_answers"警报2"来指导我，结果是，程序向我显示"警报1"5次，而不是向我显示"警报2"一次，而且只有在每次警报值为5之后，它才允许我点击形状(远远超过5次(。我尝试过不同的方法，比如使用while。。。但什么都没用，我不明白为什么。

我的看法应该是：给我看图片=>点击它=>提醒i＝>再次显示图像=>重复该过程直到i达到数字5=>警报1=>警报2

function call(){

setTimeout(Appear,Math.random() * 3000);
}






call();

for( i=0;i<5;i++){

document.getElementById("shape").onclick=function(){
document.getElementById("shape").style.display="none";
alert(i);
call();

}
alert('alert 1')
}


alert   ('alert 2');

Answer 1

您应该

• 附加一次点击事件
• 对点击量进行全局计数
• 检查您是否已到达call的末尾

var i = 0;
function call() {
if(i == 5) {
alert("Finished");
return
}
setTimeout(() => {
document.getElementById("shape").style.display = "block";
}, Math.random() * 3000);
}
document.getElementById("shape").onclick = function() {
this.style.display = "none";
alert(++i);
call();
}
call()

#shape{
display:none
}

<div id="shape">Click me</div>

Answer 2

尝试以下操作：

let x = 0;

document.getElementById("shape").onclick=function(){
if(x>4) return;
document.getElementById("shape").style.display="none";        
x++;
console.log(x);
call();
}

function call(){
// Add your own method here
document.getElementById("shape").style.display="block";
}