JavaScript giving wrong output

Question

I am creating the game (paper/scissors/stone) and in my final section I want to compare userChoice vs computerChoice, but for some reason I am getting wrong output: when I press on the button eg 'Stone' and computer choose 'Scissors' I am getting following output: 'You Chose Stone. Computer Chose Scissors You lose! Try again.' but this is wrong! should be in the other side. I am also not getting return when "It's a tie!"; Can you please help?

 //user choice var output = document.getElementById("output"); var result = document.getElementById("result"); var count = 3; var countUser = 0; var countComputer = 0; var paper = document.querySelector("#paper header"); paper.addEventListener("click", function() { paper.classList.toggle("header-special"); userChoice = "paper"; output.innerHTML = "You Chose Paper"; compareWithComputer("paper"); }); var scissors = document.querySelector("#scissors header"); scissors.addEventListener("click", function() { scissors.classList.toggle("header-special"); userChoice = "scissors"; output.innerHTML = "You Chose Scissors"; compareWithComputer("scissors"); }); var stone = document.querySelector("#stone header"); stone.addEventListener("click", function() { stone.classList.toggle("header-special"); userChoice = "stone"; output.innerHTML = "You Chose Stone"; compareWithComputer("stone"); }); // Computer choice function compareWithComputer(userChoice) { var computerChoice = Math.floor(Math.random() * 3 + 1); if (computerChoice == 1) { computerChoice = "Stone"; } else if (computerChoice == 2) { computerChoice = "Paper"; } else { computerChoice = "Scissors"; } var results = compare(userChoice, computerChoice); output.innerHTML += ". Computer Chose " + computerChoice + results; result.innerHTML = "user " + countUser + "computer" + countComputer; } // Compare userChoice and computerChoice var compare = function(choice1, choice2) { if (choice1 === choice2) { return "It's a tie!"; } if (choice1 === "stone") { if (choice2 === "scissors") { // stone wins countUser++; return "You win!"; } else { // paper wins countComputer++; return "You lose! Try again."; } } if (choice1 === "paper") { if (choice2 === "stone") { // paper wins countUser++; return "You win!"; } else { // scissors wins countComputer++; return "You lose! Try again."; } } if (choice1 === "scissors") { if (choice2 === "stone") { // stone wins countComputer++; return "You lose! Try again."; } else { // scissors wins countUser++; return "You win!"; } } };

 <!DOCTYPE html> <div class="start" <h1>Click the button, start the game!</h1> </div> <div class="game" id="paper"> <header>Paper</header> </div> <div class="game" id="scissors"> <header>Scissors</header> </div> <div class="game" id="stone"> <header>Stone</header> </div> <div id="output"></div> <div id="result" </div>

Answer 1

In the function compareWithComputer you return strings starting with upper case. Those are not equal to their counterparts in lower case ( 'Stone' !== 'stone' ).

This code works:

  //user choice var output =document.getElementById("output"); var result =document.getElementById("result"); var count=3; var countUser=0; var countComputer=0; var paper = document.querySelector("#paper header"); paper.addEventListener("click", function() { paper.classList.toggle("header-special"); userChoice = "paper"; output.innerHTML = "You Chose Paper"; compareWithComputer("paper"); }); var scissors = document.querySelector("#scissors header"); scissors.addEventListener("click", function() { scissors.classList.toggle("header-special"); userChoice = "scissors"; output.innerHTML = "You Chose Scissors"; compareWithComputer("scissors"); }); var stone = document.querySelector("#stone header"); stone.addEventListener("click", function() { stone.classList.toggle("header-special"); userChoice = "stone"; output.innerHTML = "You Chose Stone"; compareWithComputer("stone"); }); // Computer choice function compareWithComputer(userChoice) { var computerChoice = Math.floor(Math.random() * 3 + 1); if (computerChoice == 1) { computerChoice = "stone"; } else if (computerChoice == 2) { computerChoice = "paper"; } else { computerChoice = "scissors"; } var results = compare(userChoice, computerChoice); output.innerHTML += ". Computer Chose " + computerChoice + results; result.innerHTML="user "+countUser+"computer"+countComputer; } // Compare userChoice and computerChoice var compare = function(choice1, choice2) { if (choice1 === choice2) { return "It's a tie!"; } if (choice1 === "stone") { if (choice2 === "scissors") { // stone wins countUser++; return "You win!"; } else { // paper wins countComputer++; return "You lose! Try again."; } } if (choice1 === "paper") { if (choice2 === "stone") { // paper wins countUser++; return "You win!"; } else { // scissors wins countComputer++; return "You lose! Try again."; } } if (choice1 === "scissors") { if (choice2 === "stone") { // stone wins countComputer++; return "You lose! Try again."; } else { // scissors wins countUser++; return "You win!"; } } };

  <!DOCTYPE html> <div class ="start" <h1>Click the button, start the game!</h1> </div> <div class="game" id="paper"> <header>Paper</header> </div> <div class="game" id="scissors"> <header>Scissors</header> </div> <div class="game" id="stone"> <header>Stone</header> </div> <div id="output"></div> <div id="result"</div>

JavaScript giving wrong output

Question

1 answers

solution1
1 ACCPTED 2019-04-17 15:08:03

JavaScript giving wrong output

Question

1 answers

solution1 1 ACCPTED 2019-04-17 15:08:03

solution1
1 ACCPTED 2019-04-17 15:08:03