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

Question

Here's the code:https://codepen.io/bryans98/pen/wvMeJzB这是代码：https://codepen.io/bryans98/pen/wvMeJzB

So each button is supposed to trigger a choice but for some reason, each button represents lapis every time!所以每个按钮都应该触发一个选择，但由于某种原因，每个按钮每次都代表青金石！ I can't find out how to fix it please help!我不知道如何解决它，请帮助！

 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

As other people said earlier your issue lies under player.currentChoice = choices[0];正如其他人之前所说，您的问题在于player.currentChoice = choices[0]; this line of your code where you always choosing the first index as a player choice.这行代码总是选择第一个索引作为玩家选择。 To fix this you should use event interface and change the player.currentChoice based on selected elements, so you have to use it compareChoices function.要解决此问题，您应该使用事件接口并根据所选元素更改player.currentChoice ，因此您必须使用它compareChoices function。

So your function should look like this:所以你的 function 应该是这样的：

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

Then your final code will work as expected:然后您的最终代码将按预期工作：

 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>

Answer 2

you have你有

player.currentChoice = choices[0];

So player choice is always first - Lapis所以玩家的选择永远是第一位的 - Lapis
If you change it to如果您将其更改为

player.currentChoice = choices[1];

choice will be Papyrus选择将是纸莎草

try do something like this:尝试做这样的事情：

 <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];
}

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-06-27 12:03:45

解决方案2
1 2020-06-27 12:01:35

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-06-27 12:03:45

解决方案2 1 2020-06-27 12:01:35

解决方案1
2 已采纳 2020-06-27 12:03:45

解决方案2
1 2020-06-27 12:01:35