Javascript 循环内的函数；功能无法正常工作

您好：）我正在尝试使用Javascript创建一个在屏幕上显示图像的游戏，然后，如果有人单击图像，它应该消失，过一会儿，重新出现并重复该过程5次。但当我运行代码时，它会自动增加“I”的数量。我把这些“警报1”和“警报2”放在指导我的位置上，结果是程序显示我“警报1”5次，而不是显示我“警报2”一次，只有在每次警告值为5后，它才允许我点击形状（超过5次）。我尝试过不同的方法，比如使用while。。。但是什么都没用，我不明白为什么

我看到它的方式应该是：显示图像=>单击它=>提醒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');

函数调用（）{
setTimeout（出现，Math.random（）*3000）；
}
call（）；
对于（i=0；i请尝试以下操作：

    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";
}

你应该


将单击事件附加一次
记录点击次数的全局计数
检查您是否已在
call


var i=0；
函数调用（）{
如果（i==5）{
警报（“完成”）；
返回
}
设置超时（（）=>{
document.getElementById（“shape”）.style.display=“block”；
}，Math.random（）*3000）；
}
document.getElementById（“形状”）.onclick=function（）{
this.style.display=“无”；
警报（++i）；
call（）；
}
call（）
#形状{
显示：无
}
Click me
脚本中没有任何内容实际“单击”任何内容。您添加了一个事件处理程序，当有人单击id为
shape
的元素时，该事件处理程序将执行。
call（）
不会停止循环的执行（即使它不在事件处理程序中，也不会执行）它成功了！！谢谢！！我只需要改变“if x>4 return”的位置来满足另一个条件，而不必使用“function call（）”，因为我的代码中有一个类似的选项。很高兴它成功了！@Alneto