Question

我正在制作摇滚，纸和剪刀游戏。

这是我的整个代码，我只发布它是因为我无法弄清楚为什么它不起作用，当我使用playRound('paper','scissors');时该函数运行得很好，但是当我在里面使用它时点击事件，如（见代码末尾）：

var paperButton = document.querySelector("#paper");
paperButton.addEventListener("click", playRound('paper',computerPlay()));

它只是不起作用，我点击纸张按钮，但它没有做任何事情。为什么呢？

 <!DOCTYPE html>
    <html lang="en">
    <head>

      <meta charset="UTF-8">
      <title>Rock, Paper and Scissors Game</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <div class="container">
      <button id="rock">Rock</button>
      <button id="paper">Paper</button>
      <button id="scissors">Scissors</button>
    </div>

    <div class="results">
      <div id="result">No result</div>

    </div>

    // HTML ENDS HERE


    //START OF THE JAVASCRIPT 
    <script>

    var computerScore = 0; 
    var playerScore = 0;

    function computerPlay(){

        let randomNum = Math.floor((Math.random() * 3) + 1);  

        if (randomNum == 1) {
           var compChoice = 'rock';
        } else if (randomNum == 2){
            var compChoice = 'paper';
        } else {
           var compChoice = 'scissors';
        }

        return compChoice;
    }


    function playerPlay() {

        var playerChoice = prompt("Enter rock, paper or scissors");
        return playerChoice;

    }  

    function playRound(playerSelection, computerMove ) {

    var result = document.querySelector("#result");


      switch(playerSelection) {

        case 'rock':

          if (computerMove === 'paper') {
            computerScore++;  
            result.textContent = 'Paper beats rock! You lose that round.';

          }
          else if (computerMove === 'scissors') {
              playerScore++;
             result.textContent = 'Rock beats scissors! You win that round.';

          }
          else {
             result.textContent = 'It\'s a draw!';
          }
          break;
        case 'paper':
          if (computerMove === 'scissors') {
              computerScore++;
             result.textContent = 'Scissors beats paper! You lose that round.';

          }
          else if (computerMove === 'rock') {
              playerScore++;
             result.textContent = 'Paper beats rock! You win that round.';

          }
          else {
             result.textContent = 'It\'s a draw!';
          }
          break;
        case 'scissors':
          if (computerMove === 'rock') {
               computerScore++;
             result.textContent = 'Rock beats scissors! You lose that round.';

          }
          else if (computerMove === 'paper') {
              playerScore++;
             result.textContent = 'Scissors beats paper! You win that round.';

          }
          else {
             result.textContent = 'It\'s a draw!';
          }


      }

    }

    playRound('paper','scissors');  //this works

    var rockButton = document.querySelector('#rock');
    rockButton.addEventListener("click", playRound('rock',computerPlay())); // doesn't work

    var paperButton = document.querySelector("#paper");
    paperButton.addEventListener("click", playRound('paper',computerPlay())); // doesn't work

    var scissorsButton = document.querySelector("#scissors");
    scissorsButton.addEventListener("click", playRound('scissors', computerPlay())); // doesn't work**




    </script>       

    </body>
    </html>

Answer 1

当您像这样传递时，您实际上正在执行该功能：

rockButton.addEventListener("click", playRound('rock',computerPlay()));

您需要将函数作为参数传递，如下所示：

rockButton.addEventListener("click", () => { 
    playRound('rock',computerPlay());
  } 
);

我的按钮中的事件监听器无法正常工作，该功能在click事件之外正常运行，但单击按钮时它不起作用

1 个答案: