当使用.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必须唯一
• textContent
修剪

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 + ". YOU WIN!";
playerScore+=1;
}else{
results.innerHTML = computerChoice + " beats " + playerChoice + ". COMPUTER WIN!";
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>