stackoom
  简体   繁体   中英

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

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

Question

Here's the code: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>

2 answers

solution1
 2 ACCPTED  2020-06-27 12:03:45

As other people said earlier your issue lies under 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.

So your function should look like this:

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>

solution2
 1  2020-06-27 12:01:35

you have

player.currentChoice = choices[0];

So player choice is always first - 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];
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question I'm experienced with programming but new to Javascript, can't figure out why my code won't run My javascript function doesn't seem to be working. I can't figure out why I can't figure out my JavaScript function is not working My simple routing is not working and I can't figure out why My javascript validation just stopped working and I can't figure out why I can't figure out why my javascript isn't working… I'm dynamically passing values to a tag Can't seem to figure out why my javascript isn't working in IE and Chrome Can't figure out why javascript isn't working in my php file My javascript code won't push elements to my array and I can't figure out why? I need suspend input to my calculator display when buttons are hi-lighted. Can't figure out why my setTimeout() isnt working.
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM