Question

我目前正在研究剪刀纸代码，该代码正在寻求为按钮添加1.事件监听器。 2.运行game（）函数时，将选定的按钮用作playerSelection 3.提醒结果

我还没有开始处理分数迭代++部分，但是我无法获得结果提醒。我研究并找到了此ID，并使用了一些指向我的教程来选择所有按钮，但我遇到了麻烦。任何帮助，将不胜感激！谢谢。

   <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title></title>
    </head>
     <body>
      <div id="container">
    <button id="rock">Rock</button>
    <button id="paper">Paper</button>
    <button id="scissors">Scissors</button>
    </div>

    <script>


    let pScore = 0
    let cScore = 0
    let ties = 0

     // buttons is a node list. It looks and acts much like an array.
     const buttons = document.querySelectorAll('button');

     // we use the .forEach method to iterate through each button
     buttons.forEach((button) => {

     // and for each one we add a 'click' listener
     button.addEventListener('click', (e) => {

      function game() {
      let playerSelection = this.id;
      let computerSelection = computerPlay();
      return playRound(playerSelection, computerSelection);

        function computerPlay() {
          let cChoices = ["Rock", "Paper", "Scissors"];
          let cThrow = Math.floor(Math.random()* 3);
          return cChoices[cThrow].toLowerCase();;
        }

        function playRound() {
        alert("Player picked " + playerSelection);
        alert("Computer selected " + computerSelection)
        if (playerSelection === computerSelection) {
          alert("Tie game, move on to the next round and play again");
          ties++
      } else if (playerSelection == "rock" && computerSelection == "paper"){
              alert("You lose...what a wimp");
              cScore++;

      } else if (playerSelection == "rock" && computerSelection ==        
              "scissors"){
              alert("You win, outstanding job!");
              pScore++;

      } else if (playerSelection == "paper" && computerSelection == "rock"){
              alert("You win, outstanding job!");
              pScore++;

      } else if (playerSelection == "paper" && computerSelection == 
      "scissors"){
              alert("You lose...what a wimp");
              cScore++;

      } else if (playerSelection == "scissors" && computerSelection == 
       "paper"){
              alert("You win, outstanding job!");
              pScore++;

      } else if (playerSelection == "scissors" && computerSelection == 
        "rock"){
              alert("You lose...what a wimp");

      } else {
        alert("something has gone terribly wrong");
      }
      alert("Player score is " + pScore, "Computer score is " + cScore, "Ties 
      = " + ties)

       }
      }
      });
     });

     </script>
       </body>
       </html>

Answer 1

问题是您在button.addEventListener()中使用了箭头功能。箭头函数从创建它们的作用域中获得this，因此其中不包含您单击的元素。

您可以使用event.target或button代替this，例如

let playerSelection = button.id;

或

let playerSelection = event.target.id;

或者您可以将箭头功能更改为传统功能：

button.addEventListener("click", function(event) {
    ...
});

另一个建议：与其传递ID，不如传递ID本身。当您要对元素进行操作时，这使您不必在各处调用document.getElementById()。

函数onclick事件监听器，使用函数中单击按钮的ID

1 个答案: