var 不更新，count 不更新

Question

我创建了一个简单的 javascript 石头、纸、剪刀、蜥蜴、spock 游戏。我遇到的问题是：

1. var computerChoice 在每次页面加载时设置一次。多次按下按钮保持不变，直到页面被刷新。

2. 赢/输/平计数不更新。

我的代码：

<h1>Rock, Paper, Scissors, Lizard, Spock</h1><br>
<div id="user-choice">
    <button id="Rock" value="Rock" onclick="choose('Rock')"><i class="fa fa-hand-rock-o fa-3x"></i></button>
    <button id="Paper" value="Paper" onclick="choose('Paper')"><i class="fa fa-hand-paper-o fa-3x"></i></button>
    <button id="Scissors" value="Scissors" onclick="choose('Scissors')"><i class="fa fa-hand-scissors-o fa-3x"></i></button>
    <button id="Lizard" value="Lizard" onclick="choose('Lizard')"><i class="fa fa-hand-lizard-o fa-3x"></i></button>
    <button id="Spock" value="Spock" onclick="choose('Spock')"><i class="fa fa-hand-spock-o fa-3x"></i></button>
</div>

<div id="results">
<br>
<br>

<span id="win"></span><br>
<span id="lose"></span><br>
<span id="tie"></span><br>
<script>
var win = 0
var lose = 0
var tie = 0

document.getElementById("win").textContent = 'Wins: ' + win
document.getElementById("lose").textContent = 'Losses: ' + lose
document.getElementById("tie").textContent ='Ties: ' + tie
</script>




<script>
var win = 0
var lose = 0
var tie = 0 

var computerChoice = Math.random();
if (computerChoice <= 0.2) {
    computerChoice = "Rock";
} else if (computerChoice <= 0.4) {
    computerChoice = "Paper";
} else if (computerChoice <= 0.6) {
    computerChoice = "Scissors";
} else if (computerChoice <= 0.8) {
    computerChoice = "Lizard";
} else {
    computerChoice = "Spock";
}


var playerChoice;
function choose(choice){
    playerChoice = choice;
    alert("I chose " + computerChoice + ".");

// Rock Outcomes
if (playerChoice == computerChoice) {
    alert("It's a tie!");
    tie++;
} else if (playerChoice == 'Rock' && computerChoice == 'Paper') {
    alert(computerChoice + ' covers ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Rock' && computerChoice == 'Spock') {
    alert(computerChoice + ' vaporises ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Rock' && computerChoice == 'Lizard') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Rock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
}
// End Rock Outcomes

// Paper Outcomes
 else if (playerChoice == 'Paper' && computerChoice == 'Scissors') {
    alert(computerChoice + ' cuts ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Paper' && computerChoice == 'Lizard') {
    alert(computerChoice + ' eats ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Paper' && computerChoice == 'Rock') {
    alert(playerChoice + ' covers ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Paper' && computerChoice == 'Spock') {
    alert(playerChoice + ' disproves ' + computerChoice + '. You win!');
    win++;
}
// End Paper Outcomes

// Scissors Outcomes
 else if (playerChoice == 'Scissors' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Scissors' && computerChoice == 'Spock') {
    alert(computerChoice + ' smashes ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Scissors' && computerChoice == 'Paper') {
    alert(playerChoice + ' cuts ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Scissors' && computerChoice == 'Lizard') {
    alert(playerChoice + ' decapitates ' + computerChoice + '. You win!');
    win++;
}
// End Scissors Outcomes

// Lizard Outcomes
 else if (playerChoice == 'Lizard' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Lizard' && computerChoice == 'Scissors') {
    alert(computerChoice + ' decapitates ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Lizard' && computerChoice == 'Paper') {
    alert(playerChoice + ' eats ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Lizard' && computerChoice == 'Spock') {
    alert(playerChoice + ' poisons ' + computerChoice + '. You win!');
    win++;
}
// End Lizard Outcomes

// Spock Outcomes
 else if (playerChoice == 'Spock' && computerChoice == 'Paper') {
    alert(computerChoice + ' disproves ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Spock' && computerChoice == 'Lizard') {
    alert(computerChoice + ' poisons ' + playerChoice + '. I win!');
    lose++;
} else if (playerChoice == 'Spock' && computerChoice == 'Rock') {
    alert(playerChoice + ' vaporises ' + computerChoice + '. You win!');
    win++;
} else if (playerChoice == 'Spock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' smashes ' + computerChoice + '. You win!');
    win++;
}
// End Scissors Outcomes
}

</script>

<div id="results">
<br>
<br>

<span id="win"></span><br>
<span id="lose"></span><br>
<span id="tie"></span><br>
<script>


document.getElementById("win").textContent = 'Wins: ' + win
document.getElementById("lose").textContent = 'Losses: ' + lose
document.getElementById("tie").textContent ='Ties: ' + tie
</script>

Answer 1

代码有几个问题：

• 您应该用分号结束每个语句。
• 您不应多次声明变量。
• 最好将所有 JS 放在一起（最好放在一个单独的文件中），而不是在 <script> 标记内的 HTML 周围散布它。
• 最好使用 CSS 来固定格式，而不是使用 <br> 标签在元素之间留出空间。

但最重要的是，您需要将进行所有计算的代码封装到一个函数中，每次用户进行选择时都会调用该函数，这样计算机选择和计数器都会更新。

试试这个 sn-p。

var win = 0;
var lose = 0;
var tie = 0;

function UpdateCounter() {
  document.getElementById("win").textContent = 'Wins: ' + win;
  document.getElementById("lose").textContent = 'Losses: ' + lose;
  document.getElementById("tie").textContent = 'Ties: ' + tie;
}

function ComputerChoice() {
  var computerChoice = Math.random();
  if (computerChoice <= 0.2) {
    computerChoice = "Rock";
  } else if (computerChoice <= 0.4) {
    computerChoice = "Paper";
  } else if (computerChoice <= 0.6) {
    computerChoice = "Scissors";
  } else if (computerChoice <= 0.8) {
    computerChoice = "Lizard";
  } else {
    computerChoice = "Spock";
  }
  return computerChoice;
}

function choose(choice) {

  var playerChoice = choice;
  var computerChoice = ComputerChoice();

  alert("I chose " + computerChoice + ".");

  // Rock Outcomes
  if (playerChoice == computerChoice) {
    alert("It's a tie!");
    tie++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Paper') {
    alert(computerChoice + ' covers ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Spock') {
    alert(computerChoice + ' vaporises ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Lizard') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Rock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' crushes ' + computerChoice + '. You win!');
    win++;
  }
  // End Rock Outcomes

  // Paper Outcomes
  else if (playerChoice == 'Paper' && computerChoice == 'Scissors') {
    alert(computerChoice + ' cuts ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Paper' && computerChoice == 'Lizard') {
    alert(computerChoice + ' eats ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Paper' && computerChoice == 'Rock') {
    alert(playerChoice + ' covers ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Paper' && computerChoice == 'Spock') {
    alert(playerChoice + ' disproves ' + computerChoice + '. You win!');
    win++;
  }
  // End Paper Outcomes

  // Scissors Outcomes
  else if (playerChoice == 'Scissors' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Scissors' && computerChoice == 'Spock') {
    alert(computerChoice + ' smashes ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Scissors' && computerChoice == 'Paper') {
    alert(playerChoice + ' cuts ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Scissors' && computerChoice == 'Lizard') {
    alert(playerChoice + ' decapitates ' + computerChoice + '. You win!');
    win++;
  }
  // End Scissors Outcomes

  // Lizard Outcomes
  else if (playerChoice == 'Lizard' && computerChoice == 'Rock') {
    alert(computerChoice + ' crushes ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Lizard' && computerChoice == 'Scissors') {
    alert(computerChoice + ' decapitates ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Lizard' && computerChoice == 'Paper') {
    alert(playerChoice + ' eats ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Lizard' && computerChoice == 'Spock') {
    alert(playerChoice + ' poisons ' + computerChoice + '. You win!');
    win++;
  }
  // End Lizard Outcomes

  // Spock Outcomes
  else if (playerChoice == 'Spock' && computerChoice == 'Paper') {
    alert(computerChoice + ' disproves ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Spock' && computerChoice == 'Lizard') {
    alert(computerChoice + ' poisons ' + playerChoice + '. I win!');
    lose++;
  } else if (playerChoice == 'Spock' && computerChoice == 'Rock') {
    alert(playerChoice + ' vaporises ' + computerChoice + '. You win!');
    win++;
  } else if (playerChoice == 'Spock' && computerChoice == 'Scissors') {
    alert(playerChoice + ' smashes ' + computerChoice + '. You win!');
    win++;
  }
  // End Scissors Outcomes
  
  UpdateCounter();
}

<h1>Rock, Paper, Scissors, Lizard, Spock</h1>
<br>
<div id="user-choice">
  <button id="Rock" value="Rock" onclick="choose('Rock')"><i class="fa fa-hand-rock-o fa-3x">Rock</i>
  </button>
  <button id="Paper" value="Paper" onclick="choose('Paper')"><i class="fa fa-hand-paper-o fa-3x">Paper</i>
  </button>
  <button id="Scissors" value="Scissors" onclick="choose('Scissors')"><i class="fa fa-hand-scissors-o fa-3x">Scissors</i>
  </button>
  <button id="Lizard" value="Lizard" onclick="choose('Lizard')"><i class="fa fa-hand-lizard-o fa-3x">Lizard</i>
  </button>
  <button id="Spock" value="Spock" onclick="choose('Spock')"><i class="fa fa-hand-spock-o fa-3x">Spock</i>
  </button>
</div>

<div id="results">
  <br><br>
  <span id="win"></span>
  <br>
  <span id="lose"></span>
  <br>
  <span id="tie"></span>
  <br>
</div>

无论如何，为主题 +1。现在我要玩一会儿:)