我的事件侦听器中只有部分 if-else 语句有效

Question

这里是代码新手。所以我正在尝试对我的剪刀石头布游戏进行一些更改。我希望捕获分数并在页面上显示结果文本。每次单击按钮时都会显示文本，但是一旦我添加了 +1 增量和代码以在屏幕上实时显示分数，文本就不会显示。我只是先在 'rock' 事件侦听器上测试它，以确保它有效。

//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

您应该调用一次 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')

没有意义，因为你调用了两次（电脑一次点击播放两次）

Answer 2

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

let computersHand = computerPlay();

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

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

如果您出于某种原因不想将 returned 值存储到变量中，您可以使用 switch 语句

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

我推荐你阅读this

我的事件侦听器中只有部分 if-else 语句有效

Only part of my if-else statement within my event listener is working

html

javascript

dom-events