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

Question

代码新手在这里。所以我正在尝试对我的石头剪刀布游戏进行一些改变。我希望捕获分数并在页面上显示结果文本。每次单击按钮时都会显示文本，但一旦我添加了 +1 增量和在屏幕上实时显示分数的代码，文本就不会显示。我只是首先在“rock”事件侦听器上测试它，以确保它有效。//Selects the classes .rock .paper .scissorsconst rock = document.querySelector(".rock")const paper = document.querySelector(".paper")const scissors = document.querySelector(".scissors")//new div under resultsconst results = document.getElementById("results");//new itemslet itemRock = document.createElement('h3');let itemPaper = document.createElement('h3');let itemScissors = document.createElement('h3');    //variable for computerPlay() function to be printed to #resultsitemRock.textContent = 'You have chosen rock!';itemPaper.textContent = 'You have chosen paper!';itemScissors.textContent = 'You have chosen scissors!';//Player + computer score for count purposeslet 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')

没有意义，因为你称它为两次（计算机一键播放两次）