在浏览器中单击按钮后，如果 else 语句不起作用

Question

我想使用 Javascript、DOM、HTML 和 CSS 构建游戏。我的逻辑如下：

第 1 步：单击三个按钮执行三个不同的功能，名为 random1、random2 和 random3。每个函数将生成两个随机数。 （假设 1 和 2）。

Step2：使用if/else-if条件检查这些函数的结果。

Step3：如果所有按钮的返回值都等于1，则提示（“玩家1获胜”）。 同样，如果值为 2，则会提示“玩家 2 获胜”。

Step4：如果值不相等，程序会要求刷新浏览器。

但问题是，当我在浏览器中运行此代码时，只有 else 语句起作用，而 if/else-if 不起作用。另一个问题：在单击“按钮三”时，在 p/> 标签中显示随机数之前，else 语句起作用。

//My Code//

var a;
function random1(){
    a = Math.floor(Math.random()*2+1);
    document.getElementById("para1").innerHTML = a;
    return a;       
}
let p1 = document.getElementById("myBtn1");
p1.addEventListener("click", random1);

var b
function random2(){
    b = Math.floor(Math.random()*2+1);
    document.getElementById("para2").innerHTML = b;
    return b;       
}

let t2 = document.getElementById("myBtn2")
t2.addEventListener("click",random2);

var c
function random3(){
    c=Math.floor(Math.random()*2+1);
    document.getElementById("para3").innerHTML = c; 
    return c;    
}

let r3 = document.getElementById("myBtn3");
r3.addEventListener("click",check(a,b,c));
r3.addEventListener("click",random3);


function check(s,t,u){
    if(s===1 && t===1 && u===1){
        alert("Players 1 Wins");
    }
    else if(s===2 && t===2 && u===2){
        alert("Player 2 Wins");
    }
    else{
        alert("Refresh the Browser");
    }
}

Answer 1

问题出在这一行

r3.addEventListener("click",check(a,b,c))

该函数必须是一个监听器，当事件发生时会被浏览器调用。 要解决它，您可以这样做。

r3.addEventListener("click",() => {
   check(a,b,c)
})

Answer 2

首先，您在alert"Refresh the Browser"); 中有错字

缺少( 括号。

接下来，当你必须向监听器传递参数时，使用匿名函数调用带有参数的指定函数，以便在事件发生时执行。

你可以这样做。

r3.addEventListener("click",function(){
    check(a,b,c));
}

如果您愿意，也可以使用箭头函数。

r3.addEventListener("click",() => {
    check(a,b,c));
}

最后也是最重要的，您的代码的主要问题是 eventListener 的排序。

r3.addEventListener("click",random3);
r3.addEventListener("click",check(a,b,c));

您可能想先调用random3 来设置c 的值，然后检查，所以请保持在上面。