堆栈内存溢出
  繁体   English   中英

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

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

 原文  2020-06-27 11:52:55  8   2    javascript/ new-operator

问题描述

这是代码：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>

2 个解决方案

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

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

所以你的 function 应该是这样的：

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>

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

你有

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我有编程经验，但是对Javascript还是陌生的，无法弄清楚为什么我的代码无法运行 我的javascript函数似乎无法正常工作。 我不知道为什么 我不知道我的 JavaScript 函数不起作用 我的简单路由无法正常工作，我不知道为什么 我的 javascript 验证刚刚停止工作，我不知道为什么 我不知道为什么我的JavaScript无法正常工作…我正在将值动态传递给标签 似乎无法弄清楚为什么我的JavaScript无法在IE和Chrome中运行 无法弄清楚为什么javascript无法在我的php文件中工作 我的 javascript 代码不会将元素推送到我的数组，我不知道为什么？ 当按钮高亮显示时，我需要暂停输入到计算器显示屏。 无法弄清楚为什么我的setTimeout（）无法正常工作。
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM