javascript - 基于按钮'addEventListener'的输出结果不起作用++

Question

我正在构建石头剪刀布游戏。我还没有完成，但似乎无法弄清楚如何输出计算机获胜时间与玩家获胜时间的分数。

玩家可以点击三个按钮，石头、纸或剪刀。计算机正在使用 math.random 从数组中进行选择。例如，当像“摇滚”一样单击按钮时，它会获取 playerChoice（来自单击的按钮）并激活 vs() 函数。然后 vs 函数激活 playRound。

如果玩家在 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

<h1 class="title">Welcome to Rock, Paper, Scissors!</h1>
<h2 class="title-sub">Against the computer....</h2>

<h1 id="scoreboard"></h1>

<div id="scoreContainer">
  <div id="playerScore">
    <h3 class="playersTitle playerColor">Player</h3>
    <p id="ps"></p>
  </div>
  <div id="computerScore">
    <h3 class="playersTitle computerColor">Computer</h3>
    <p id="cs"></p>
  </div>
</div>

<div id="options">
  <div id="rock">
    <button id="submitRock">ROCK</button>
  </div>
  <div id="paper">
    <button id="submitPaper">PAPER</button>
  </div>
  <div id="scissors">
    <button id="submitScissors">SCISSORS</button>
  </div>
</div>

<p id="winner"></p>

标签： javascript

Answer 1

我修复了你的代码……注释掉了烦人的新“const”，这样我就可以检查我的代码了……有些人会抱怨我“为”你编写了它——我是为自己编写的！我希望你能从中吸取教训，也欢迎你提出问题——如果你完全理解我的所作所为，我会很高兴。

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，但我认为记分牌不应该<h1>太大。
此外，您可以更改消息/添加计算机和播放器选择 div/spans：
单击后：
播放器：<say，Rock> 计算机：<say，Paper>
Paper 击败 Rock，你输了。