编码新手，我不明白为什么我的 javascript 按钮不能正常工作？

Question

这是 code:https://codepen.io/bryans98/pen/wvMeJzB

所以每个按钮都应该触发一个选择，但由于某种原因，每个按钮每次都代表青金石！我找不到解决方法，请帮忙！

const player = {
  currentChoice: null
}
const computer = {
  currentChoice: null
}
const choices = ["Lapis", "Papyrus", "Scalpellus"]
player.currentChoice = choices[0];

function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

function compareChoices() {
  computerChooses();
  if (computer.currentChoice === player.currentChoice) {
    displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
  } else if (computer.currentChoice === choices[0]) {
    if (player.currentChoice === choices[1]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[1]) {
    if (player.currentChoice === choices[2]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[2]) {
    if (player.currentChoice === choices[0]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }
}

function displayResult(result) {
  const resultText = document.createElement('p');
  resultText.innerText = result;

  document.body.appendChild(resultText);
}

document.getElementById('lbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('pbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('sbutton').addEventListener('click', compareChoices, displayResult);

#lbutton {
  color: black;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  padding 0px 10px 0px 10px;
  position: static;
}

#pbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

#sbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

.c {
  padding: 50px 0px 50px;
}

<body>


  <h1> Welcome to the Ancient game of Lapis, Papyrus, Scalpellus!</h1>

  <div class="c">
    <button id="lbutton"><b>Lapis<b></button>
    <button id="pbutton"><b>Papyrus<b></button>
    <button id="sbutton"><b>Scalpellus<b></button>
  </div>

  <h2> The results are in...</h2>


</body>

Answer 1

你有

player.currentChoice = choices[0];

所以玩家的选择永远是第一位的 - Lapis
如果你把它改成

player.currentChoice = choices[1];

选择纸莎草纸

尝试做这样的事情：

 <div class="c">
   <button id="lbutton" onclick="change(0)"><b>Lapis</b></button>
   <button id="pbutton" class="Papyrusbutton" onclick="change(1)"><b>Papyrus</b></button>
   <button id="sbutton" class="Scalpellusbutton" onclick="change(2)"><b>Scalpellus</b></button>
 </div>

function change(par) {
  player.currentChoice = choices[par];
}

Answer 2

正如其他人之前所说 您的问题出在 player.currentChoice = choices[0]; 这行代码中，您总是选择第一个索引作为玩家选择。要解决此问题，您应该使用 event interface 并根据所选元素更改 player.currentChoice，因此您必须使用它的 compareChoices 函数。

所以你的函数应该是这样的：

function compareChoices(e) {
  player.currentChoice = e.target.innerText;
  // rest of your function
}

那么您的最终代码将按预期工作：

const player = {
  currentChoice: null
}
const computer = {
  currentChoice: null
}
const choices = ["Lapis", "Papyrus", "Scalpellus"]


function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

function compareChoices(e) {
  player.currentChoice = e.target.innerText;
  computerChooses();
  if (computer.currentChoice === player.currentChoice) {
    displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
  } else if (computer.currentChoice === choices[0]) {
    if (player.currentChoice === choices[1]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[1]) {
    if (player.currentChoice === choices[2]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[2]) {
    if (player.currentChoice === choices[0]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }
}

function displayResult(result) {
  const resultText = document.createElement('p');
  resultText.innerText = result;

  document.body.appendChild(resultText);
}

document.getElementById('lbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('pbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('sbutton').addEventListener('click', compareChoices, displayResult);

#lbutton {
  color: black;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  padding 0px 10px 0px 10px;
  position: static;
}

#pbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

#sbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

.c {
  padding: 50px 0px 50px;
}

<body>


  <h1> Welcome to the Ancient game of Lapis, Papyrus, Scalpellus!</h1>

  <div class="c">
    <button id="lbutton"><b>Lapis</b></button>
    <button id="pbutton"><b>Papyrus</b></button>
    <button id="sbutton"><b>Scalpellus</b></button>
  </div>

  <h2> The results are in...</h2>


</body>

编码新手，我不明白为什么我的 javascript 按钮不能正常工作？

New to coding,I can't figure out why my javascript buttons are not working properly?

javascript

new-operator