Question

在我的摇滚剪刀游戏中添加了按钮，在userChoice变量更改后我无法显示警报，因此我使用了eventListeners，并且获胜者停止显示警报，为什么会发生这种情况？有更好的方法吗？

我是初学者，感谢任何帮助。

<!DOCTYPE html>
<html>
<body>
</body>


<script>

function compPlay (){} //picks a random nb and makes it rock paper... 

let userChoice;

function userPlay (){
  btnRock.addEventListener("click", ()=>{
    userChoice="rock";
    return userChoice;
  });

  btnPaper.addEventListener("click", ()=>{
    userChoice="paper";
    return userChoice;
  });

  btnScissors.addEventListener("click", ()=>{
    userChoice="scissors";
    return userChoice;
  });
}

function theGame (compPlay,userPlay) {
  if (compPlay===userPlay) {
    alert("its tied");
  } else if (compPlay === "rock" && userPlay === "scissors") {
    alert("you lose!");
  } else if (compPlay === "scissors" && userPlay === "paper") {
    alert("you lose");
  } else if (compPlay=== "paper" && userPlay === "rock"){
    alert("you lose");
  } else if (compPlay === "scissors" && userPlay === "rock") {
    alert("you win!");
  } else if (compPlay === "paper" && userPlay === "scissors") {
    alert("you win");
  } else if (compPlay=== "rock" && userPlay === "paper"){
    alert("you win");
}
}

theGame(compPlay(),userPlay());

</script>
</html>

Answer 1

函数调用将在加载脚本期间发生。届时，compPlay函数将返回一个值，而userPlay函数将创建元素。此后，当按钮单击发生时，甚至不会调用该函数。

编辑：对于您的信息。这是一种方法

<!DOCTYPE html>
<html>
<body>
</body>


<script>
function compPlay (){

  let comChoice= Math.random();
  console.log(comChoice);
  if (comChoice<=0.33){
    comChoice= "rock";
  } else if (comChoice<=0.66){
    comChoice= "scissors";
  } else {
    comChoice= "paper";
  }
  userPlay(comChoice);
  }

let userChoice;

function userPlay (comChoice){//Function for user's click comparison with computer's option

  let btnRock = document.createElement("button");
  let tRock = document.createTextNode("Rock");
  btnRock.appendChild(tRock);
  document.body.appendChild(btnRock);
  btnRock.addEventListener("click", ()=>{
    userChoice="rock";
    theGame(comChoice,userChoice);//Main function call to decide the winner
  });


  let btnPaper = document.createElement("button");
  let tPaper = document.createTextNode("Paper");
  btnPaper.appendChild(tPaper);
  document.body.appendChild(btnPaper);
  btnPaper.addEventListener("click", ()=>{
    userChoice="paper";
    theGame(comChoice,userChoice);
  });

  let btnScissors = document.createElement("button");
  let tScissors = document.createTextNode("Scissors");
  btnScissors.appendChild(tScissors);
  document.body.appendChild(btnScissors);
  btnScissors.addEventListener("click", ()=>{
    userChoice="scissors";
    theGame(comChoice,userChoice);
  });
}

function theGame (compPlay,userPlay) {
  if (compPlay===userPlay) {
    alert("its tied");
  } else if (compPlay === "rock" && userPlay === "scissors") {
    alert("you lose!");
  } else if (compPlay === "scissors" && userPlay === "paper") {
    alert("you lose");
  } else if (compPlay=== "paper" && userPlay === "rock"){
    alert("you lose");
  } else if (compPlay === "scissors" && userPlay === "rock") {
    alert("you win!");
  } else if (compPlay === "paper" && userPlay === "scissors") {
    alert("you win");
  } else if (compPlay=== "rock" && userPlay === "paper"){
    alert("you win");
}
}
compPlay();//Basic initialising function call 

</script>
</html>

Answer 2

单击按钮时可以调用游戏功能

btnScissors.addEventListener("click", ()=>{
userChoice="scissors";
theGame(comChoice,userChoice);
});

编辑：我忘了说为了工作你应该把你的comChoice改成一个全局变量。谢谢@Krisna Prashatt

alert（）无法正常工作

2 个答案: