Javascript 根据按钮输出结果'；增补列表器'；不工作++；

我正在制作石头剪刀布游戏。我还没做完，但似乎不知道如何输出计算机获胜时与玩家获胜时的分数

玩家可以单击三个按钮：石头、布或剪刀。计算机正在使用math.random从数组中选择。例如，当像“rock”一样单击按钮时，它会获取playerChoice（从单击的按钮中）并激活vs（）函数。然后，VS功能激活游戏回合

如果玩家在playRound（）中输了，它将激活playerLost（）函数，该函数将输出1的计算机分数

如果计算机未获胜，则playRound（）中的else语句应将playerScore增加1

我使用getElementByID创建了一个变量，并针对您可以在顶部看到的输出元素。变量为“PlayerScore”和“computerScore”

我在“computerScore++”和“playerScore++”中显然做错了什么，因为它没有输出任何东西。在我把这个问题解决之后，我可以继续完成这个项目

let playerScore = 0;
let computerScore = 0;
const rock = document.getElementById("submitRock");
const paper = document.getElementById("submitPaper");
const scissors = document.getElementById("submitScissors");
const choices = ["rock", "paper", "scissors"];
playerScore = document.getElementById("ps").innerText;
computerScore = document.getElementById("cs").innerText;
// document.getElementById("ps").textContent = playerScore;
// document.getElementById("cs").textContent = computerScore;

function computerChoice() {
  let mathRandom = Math.floor(Math.random() * 3);
  let computerChoice = choices[mathRandom];
  return computerChoice;
}

function playerLost() {
  document.getElementById(
    "cs"
  ).innerText = `You lost! ${computerChoice} beat your choice!`;
  computerScore++;
}

rock.addEventListener("click", function () {
  playerChoice = choices[0];
  versus();
});

paper.addEventListener("click", function () {
  playerChoice = choices[1];
  versus();
});

scissors.addEventListener("click", function () {
  playerChoice = choices[2];
  versus();
});

function versus() {
  playRound();
}

function playRound(computerChoice) {
  if (computerChoice === choices[0] && playerChoice === [2]) {
    return playerLost();
  } else if (computerChoice === choices[1] && playerChoice === [0]) {
    playerLost();
  } else if (computerChoice === choices[2] && playerChoice === [1]) {
    playerLost();
  } else if (computerChoice === playerChoice) {
    document.getElementById(
      "scoreboard"
    ).textContent = `DUDE!!! That is a draw! The computer picked ${computerChoice} and you picked ${playerChoice}`;
  } else
    document.getElementById(
      "scoreboard"
    ).textContent = `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
  playerScore++;
}

HTML

欢迎来到石头、布、剪刀！
对着电脑。。。。
玩家

电脑类

摇滚乐
纸张
剪刀

我认为问题的一部分在于，在函数vs（）中，您实际上没有将参数传递给playRound（）函数。playRound的函数声明接受一个名为computerChoice的参数，但在调用playRound时，实际上从未传入computerChoice

所以我认为，当解释器真正开始评估你的控制结构（即playRound中的if、else if和else语句）时，解释器可能会抛出某种错误，因为computerChoice是未定义的（因此，它永远不会改变记分板div或cs段落的文本内容）

---

此外，我认为，由于computerChoice是一个函数，因此必须在playRound函数中添加打开和关闭参数来调用它。此外，由于computerChoice涉及随机性，您需要将返回值存储到playRound函数中的一个变量。否则，您可能会得到每次在一个if/else if/语句中计算函数时，computerChoice都会返回不同的随机选择。

我修复了您的代码…注释掉了令人讨厌的新“const”，以便我可以检查我的代码…有些人会抱怨我将其编码为“for”你——我是为自己做的！我希望你能从中学习，欢迎你提问——如果你完全理解我所做的，我会很高兴

let computerScore = 0;
/*const*/ choices = ["rock", "paper", "scissors"];

/*const*/ rock = document.getElementById("submitRock");
rock.addEventListener("click", function () {
  playRound(choices[0]);
});

/*const*/ paper = document.getElementById("submitPaper");
paper.addEventListener("click", function () {
  playRound(choices[1]);
});

/*const*/ scissors = document.getElementById("submitScissors");
scissors.addEventListener("click", function () {
  playRound(choices[2]);
});

function playRound(playerChoice) {
  let computerChoice=choices[Math.floor(Math.random() * choices.length)];
  if(
    (computerChoice === choices[0] && playerChoice === choices[2]) ||
    (computerChoice === choices[1] && playerChoice === choices[0]) ||
    (computerChoice === choices[2] && playerChoice === choices[1])
  ) {
    document.getElementById(
      "scoreboard"
    ).innerText = `You lost! ${computerChoice} beat your choice - ${playerChoice}!`;
    document.getElementById("cs").innerText=Number(document.getElementById("cs").innerText)+1;
  }
  else if(computerChoice === playerChoice) {
    document.getElementById(
      "scoreboard"
    ).textContent = `DUDE!!! That is a draw! The computer picked ${computerChoice} and you picked ${playerChoice}`;
  }
  else {
    document.getElementById(
      "scoreboard"
    ).textContent = `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
    document.getElementById("ps").innerText=Number(document.getElementById("cs").innerText)+1;
  }
}

我没有更改您的HTML，不过我认为记分板不应该太大。
此外，您还可以更改消息/添加计算机和播放器选项divs/span:
单击后：
播放器：计算机：

---

纸胜石头，你输。

现在你有了解决方案，这里有一种不同的方法来构造你的代码

let
playerScore=0，
计算机评分=0；
常数
摇滚乐，
纸张='纸张'，
剪刀=‘剪刀’，
选项=[石头、布、剪刀]，
getById=（id）=>document.getElementById（id），
optionsDiv=getById（'options'），
rockBtn=getById（'rockBtn'），
paperBtn=getById（'paperBtn'），
scissorsBtn=getById（'scissorsBtn'），
记分牌=getById（‘记分牌’），
playerCoreDisplay=getById（'psDisplay'），
computerScoreDisplay=getById（'csDisplay'）；
updateScoreDisplay（）；//初始化显示
//在容器div上添加一个侦听器--单击会触发“playerChoiceSubmitted”`
options.addEventListener（'click'，playerChoiceSubmitted）；
功能播放器选择提交（事件）{
//侦听器可以自动访问触发事件（具有目标属性）
const clicked=event.target；
如果（！clicked.classList.contains（“option”）{return；}//忽略不相关的单击
让玩家选择；
如果（clicked.id==“rockBtn”）{playerChoice=ROCK；}
如果（clicked.id==“paperBtn”）{playerChoice=PAPER；}
else if（clicked.id===“scissorsBtn”）{playerChoice=SCISSORS；}
playRound（playerChoice，getComputerChoice（））；//获取comp选项，然后开始循环
};
函数getComputerChoice（）{
const mathRandom=Math.floor（Math.random（）*3）；
const computerChoice=choices[mathRandom]；
返回计算机选择；
}
功能游戏厅（P选择，C选择）{
如果(
C选择===岩石和P选择===剪刀
||C选择===剪刀和P选择===纸
||C选择===纸张和P选择===岩石
){//玩家输了
scoreboard.textContent=getLoseText（cChoice，pChoice）；
计算机评分++；
}
如果（cChoice==pChoice）{//Draw
scoreboard.textContent=getDrawText（cChoice，pChoice）；
}
否则{//玩家获胜
scoreboard.textContent=getWinText（cChoice，pChoice）；
playerScore++；
};
updateScoreDisplay（）；//无论谁赢了，都会更新可见分数
}
函数updateScoreDisplay（）{
playerCoreDisplay.textContent=playerCore；
computerScoreDisplay.textContent=computerScore；
}
函数getDrawText（计算机选择、播放器选择）{
return`DUDE！！！打成平局！计算机选择了${computerChoice}，而你选择了${playerChoice}`；
}
函数getWinText（计算机选择、播放器选择）{
return`You win！您选择了${playerChoice}，而计算机选择了${computerChoice}`；
}
函数GetCloseText（计算机选择、播放器选择）{
return`your lost！${computerChoice}击败your choice！`；
}

#分数{字体大小：1.5em；边距底部：0.5em；}

玩家：
计算机：
摇滚乐
纸张
剪刀
let computerScore = 0;
/*const*/ choices = ["rock", "paper", "scissors"];

/*const*/ rock = document.getElementById("submitRock");
rock.addEventListener("click", function () {
  playRound(choices[0]);
});

/*const*/ paper = document.getElementById("submitPaper");
paper.addEventListener("click", function () {
  playRound(choices[1]);
});

/*const*/ scissors = document.getElementById("submitScissors");
scissors.addEventListener("click", function () {
  playRound(choices[2]);
});

function playRound(playerChoice) {
  let computerChoice=choices[Math.floor(Math.random() * choices.length)];
  if(
    (computerChoice === choices[0] && playerChoice === choices[2]) ||
    (computerChoice === choices[1] && playerChoice === choices[0]) ||
    (computerChoice === choices[2] && playerChoice === choices[1])
  ) {
    document.getElementById(
      "scoreboard"
    ).innerText = `You lost! ${computerChoice} beat your choice - ${playerChoice}!`;
    document.getElementById("cs").innerText=Number(document.getElementById("cs").innerText)+1;
  }
  else if(computerChoice === playerChoice) {
    document.getElementById(
      "scoreboard"
    ).textContent = `DUDE!!! That is a draw! The computer picked ${computerChoice} and you picked ${playerChoice}`;
  }
  else {
    document.getElementById(
      "scoreboard"
    ).textContent = `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
    document.getElementById("ps").innerText=Number(document.getElementById("cs").innerText)+1;
  }
}