我的事件监听器中只有部分 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

我看到您每次执行 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() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const result = computerPlay();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;itemRock.textContent = 'You have chosen rock and the computer has chosen paper.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;' + 'You lose, paper beats rock! Try again';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;computerScore += 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("computer-score").innerText = computerScore;&nbsp; &nbsp; } else if(result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;itemRock.textContent = 'You have chosen rock and the computer has chosen rock.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;' +&nbsp; 'Its a draw, try again';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;itemRock.textContent = 'You have chosen rock and the computer has chosen&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scissors. ' + 'You win! Rock beats scissors.';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;playerScore += 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("player-score").innerText = playerScore;&nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; return 'rock';&nbsp;&nbsp;})computerPlay像这样调用函数computerPlay();if (computerPlay() === 'paper')没有意义，因为你称它为两次（计算机一键播放两次）