这是代码：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>正如其他人之前所说，您的问题在于player.currentChoice = choices[0];代码的这一行，您始终选择第一个索引作为玩家选择。要解决此问题，您应该使用事件接口并根据所选元素更改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>你有
player.currentChoice = choices[0];
所以玩家的选择永远是第一位的——青金石
如果将其更改为
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];
}