使用 .target.innerHTML 时我的输入总是返回 0

Question

我目前正在用 JavaScript 为我的剪刀石头布游戏程序创建一个 UI。在更改我的代码片段时，我发现在运行函数

playerChoice

时，我的变量

playRound(playerChoice, getComputerChoice())

的值将始终以 0 结束。但是，当输入类似的纯字符串（例如

ROCK, PAPER, or SCISSORS

）时，代码/游戏运行正常。

我尝试按照它被传递到的路径进行操作，所以我使用了 console.log:

• 在第 51 行下

  console.log(typeof playerChoice)

  它是字符串
• 在第 26 行下

  console.log(typeof playerChecker)

  它是字符串

到目前为止一切顺利，因为它仍然是相同的数据类型。现在它进入我的函数

inputConverter()

，因为变量

let playerChoice

。但是当我使用 console.log 时：

• 在第 29 行下，如

  console.log(playerChoice)

  ，它总是以 0 结束。但是计算机选择的变量不会。这是为什么？

我试过使用调试工具和所有的，但最后它没有显示出来，因为它是一个逻辑错误。我以为是因为我用了

e.target.innerHTML

，但我不确定是不是真的。

function getComputerChoice() {
  // 2 is for Scissors, 1 is for Rock, 0 is for Paper
  const compChoice = Math.floor(Math.random() * 3);
  if (compChoice === 2) {
    return "Scissors";
  } else if (compChoice === 1) {
    return "Rock";
  } else
    return "Paper";
}

function inputConverter(gamerInput) {
  if (gamerInput === "ROCK") {
    return 2;
  } else if (gamerInput === "PAPER") {
    return 1;
  } else
    return 0;
}

function playRound(playerSelection, computerSelection) {
  let playerChecker = playerSelection.toUpperCase();
  let computerChecker = computerSelection.toUpperCase();

  let playerChoice = inputConverter(playerChecker);
  let computerChoice = inputConverter(computerChecker);

  if (playerChoice === computerChoice) {
    return "Draw! " + playerChecker + " is the same as " + computerChecker;
  } else if (playerChoice === 2 && computerChoice === 0 ||
    playerChoice === 1 && computerChoice === 2 ||
    playerChoice === 0 && computerChoice === 1) {
    return "You Win! " + playerChecker + " beats " + computerChecker;
  } else {
    return "You Lose! " + computerChecker + " beats " + playerChecker;
  }
}

let buttonChoices = document.querySelectorAll("button");

buttonChoices.forEach(i => {
  i.addEventListener("click", (e) => {
    let playerChoice = e.target.innerHTML;
    console.log(playRound(playerChoice, getComputerChoice()));
  })
})

<div id="choiceContainer">
  <button id="btn"> Rock </button>
  <button id="btn"> Paper </button>
  <button id="btn"> Scissors </button>
</div>

Answer 1

首先

id

必须是独一无二的。 其次，您尝试将带空格的字符串与不带空格的字符串进行比较，最好将

textContent

与

trim

一起使用，例如：

function getComputerChoice() {
  // 2 is for Scissors, 1 is for Rock, 0 is for Paper
  const compChoice = Math.floor(Math.random() * 3);
  if (compChoice === 2) {
    return "Scissors";
  } else if (compChoice === 1) {
    return "Rock";
  } else
    return "Paper";
}

function inputConverter(gamerInput) {
  if (gamerInput === "ROCK") {
    return 2;
  } else if (gamerInput === "PAPER") {
    return 1;
  } else
    return 0;
}

function playRound(playerSelection, computerSelection) {
  let playerChecker = playerSelection.toUpperCase();
  let computerChecker = computerSelection.toUpperCase();

  let playerChoice = inputConverter(playerChecker);
  let computerChoice = inputConverter(computerChecker);

  if (playerChoice === computerChoice) {
    return "Draw! " + playerChecker + " is the same as " + computerChecker;
  } else if (playerChoice === 2 && computerChoice === 0 ||
    playerChoice === 1 && computerChoice === 2 ||
    playerChoice === 0 && computerChoice === 1) {
    return "You Win! " + playerChecker + " beats " + computerChecker;
  } else {
    return "You Lose! " + computerChecker + " beats " + playerChecker;
  }
}

let buttonChoices = document.querySelectorAll("button");

buttonChoices.forEach(i => {
  i.addEventListener("click", (e) => {
    let playerChoice = e.target.textContent.trim();    
    console.log(playRound(playerChoice, getComputerChoice()));
  })
})

<div id="choiceContainer">
  <button class="btn"> Rock </button>
  <button class="btn"> Paper </button>
  <button class="btn"> Scissors </button>
</div>

参考：

• id必须是唯一的
• 正文内容
• 修剪

Answer 2

比我在这里发布的这个答案更简单：

如何让电脑在玩家选择后选择另一个随机选择？

        let options = ["rock", "paper", "scissors"];
        let playerChoice = null;
        let computerChoice = null;
        let rock = null;
        let paper = null;
        let scissors = null;
        let results = null;
        let choices = null;
        let score = null;
        let playerScore = 0;
        let computerScore = 0;
        
        document.addEventListener("DOMContentLoaded",addListeners);
        function addListeners(){
            rock = document.getElementById("rock");
            paper = document.getElementById("paper");
            scissors = document.getElementById("scissors");
            choices = document.getElementById("choicesDiv");
            results = document.getElementById("displayResults");
            score = document.getElementById("scoreDsp");
            rock.addEventListener("click",() => {play(0);});
            paper.addEventListener("click",() => {play(1);});
            scissors.addEventListener("click",() => {play(2);});
        }
        function play(element){
            playerChoice = options[element];
            computerChoice = computerPlay();
            choices.innerHTML = ("player = " + playerChoice + " computer = " + computerChoice);
            computeScore();
        }
        function computerPlay(){
            var rnd = Math.floor(Math.random()*options.length);
            var result = options[rnd];
            return result;
        }
        function computeScore(){
            if (playerChoice == computerChoice) {
                results.innerHTML = "Its a tie";
            }else if(
                (playerChoice == "rock" && computerChoice == "scissors") ||
                (playerChoice == "paper" && computerChoice == "rock") ||
                (playerChoice == "scissors" && computerChoice == "paper")
            ){
                results.innerHTML = playerChoice + " beats " + computerChoice;
                playerScore+=1;
            }else{
                results.innerHTML = computerChoice + " beats " + playerChoice;
                computerScore+=1;
            }
            
            score.innerHTML = "player score = " + playerScore + ", computer score = " + computerScore;
        }

    <div id="choiceContainer">
        <button id="rock" class="btn"> Rock </button>
        <button id="paper" class="btn"> Paper </button>
        <button id="scissors" class="btn"> Scissors </button>
    </div>
    <div id="choicesDiv"></div>
    <div id="displayResults"></div>
    <div id="scoreDsp"></div>