在我的事件侦听器中，只有if-else语句的一部分在工作

Question

在此处为新手编码。所以我想对我的石头剪刀游戏做一些改变。我希望分数被捕获，并在页面上显示结果的文本。每次点击按钮时都会显示文本，但一旦我添加了+1增量和代码以在屏幕上实时显示分数，文本就不会显示了。我只是先在"摇滚"事件监听器上测试一下，以确保它能正常工作。

//Selects the classes .rock .paper .scissors
const rock = document.querySelector(".rock")
const paper = document.querySelector(".paper")
const scissors = document.querySelector(".scissors")
//new div under results
const results = document.getElementById("results");
//new items
let itemRock = document.createElement('h3');
let itemPaper = document.createElement('h3');
let itemScissors = document.createElement('h3');

//variable for computerPlay() function to be printed to #results
itemRock.textContent = 'You have chosen rock!';
itemPaper.textContent = 'You have chosen paper!';
itemScissors.textContent = 'You have chosen scissors!';
//Player + computer score for count purposes
let playerScore = 0;
let computerScore = 0;
rock.addEventListener('click', function() {
computerPlay();
if(computerPlay() === 'paper') {
itemRock.textContent = 'You have chosen rock and the computer has chosen paper.' + 'You lose, paper beats rock! Try again';
computerScore += 1;
document.getElementById("computer-score").innerText = computerScore;
} else if (computerPlay() === 'rock') {
itemRock.textContent = 'You have chosen rock and the computer has chosen rock.' +  'Its a draw, try again';
} else {
itemRock.textContent = 'You have chosen rock and the computer has chosen 
scissors. ' + 'You win! Rock beats scissors.';
playerScore += 1;
document.getElementById("player-score").innerText = playerScore;
}
return 'rock';  
});

HTML代码：

<div class="choice">
<button type="button" class="rock">Rock</button>
<button type="button" class="paper">Paper</button>
<button type="button" class="scissors">Scissors</button>
</div>
<div id="results">
</div>
<p>Player Score: <a id="player-score">0</a></p>
<p>Computer Score: <a id="computer-score">0</a></p>

如有任何帮助，我们将不胜感激！

Answer 1

我看到您每次执行if/else语句时都在调用computerPlay((函数。这将返回不同的值，假设computerPlay((随机返回岩石、纸张或剪刀。您可以做的一件简单的事情是将返回的值存储在像这样的变量中

let computersHand = computerPlay();

然后在执行if/else语句时使用此变量

if (computersHand === 'rock') {
// ...
} else if (computersHand === 'paper') {
// ...
} else {
// ...
}

如果出于任何原因不想将返回的值存储到变量中，可以使用switch语句

switch (computerPlay()) {
case 'rock':
// ...
break;
case 'paper':
// ...
break;
case 'scissors':
// ...
break;
}

我建议你阅读这个

Answer 2

您应该调用computerPlay函数一次

rock.addEventListener('click', function() {

const result = computerPlay();

if (result) {
itemRock.textContent = 'You have chosen rock and the computer has chosen paper. 
' + 'You lose, paper beats rock! Try again';
computerScore += 1;
document.getElementById("computer-score").innerText = computerScore;
} else if(result) {
itemRock.textContent = 'You have chosen rock and the computer has chosen rock. 
' +  'Its a draw, try again';
} else {
itemRock.textContent = 'You have chosen rock and the computer has chosen 
scissors. ' + 'You win! Rock beats scissors.';
playerScore += 1;
document.getElementById("player-score").innerText = playerScore;
}

return 'rock';  
})

调用类似的computerPlay函数

computerPlay();
if (computerPlay() === 'paper')

毫无意义，因为你叫它两次(电脑一次点击播放两次(