What is the reason my function wont restart? - javascript

Everything works fine but when i try to re run the function it is stuck on the alert box what did i do wrong and can anyone explain why its happening.You can look at the comment in the code to see the area im getting this probem
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
var compare = function(choice1,choice2){
if (choice1 === choice2){
return "The result is a tie!";
}else if (choice1 === "rock"){
if(choice2 === "scissors"){
return("rock wins");
}else{
return("paper wins");
}
}else if (choice1 === "paper"){
if(choice2 === "rock"){
return("paper wins");
}else{
return("scissors wins");
}
}else if(choice1 === "scissors"){
if(choice2 === "rock"){
return("rock wins");
}else{
return("scissors wins");
}
}else if (choice1 != "rock"&&"paper"&&"scissors"){
alert("not a viable input,please try again");
compare(userChoice,computerChoice);
//calling the function here makes the alert box repeatedly pop up
}
};
compare(userChoice,computerChoice);

You can set a flag and put everything in a while loop.
var finished = false;
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
finished = true;
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
finished = true;
return ("rock wins");
} else {
finished = true;
return ("paper wins");
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
finished = true;
return ("paper wins");
} else {
finished = true;
return ("scissors wins");
}
} else if (choice1 === "scissors") {
if (choice2 === "rock") {
finished = true;
return ("rock wins");
} else {
finished = true;
return ("scissors wins");
}
} else if (choice1 != "rock" && "paper" && "scissors") {
alert("not a viable input,please try again");
finished = false;
//compare(userChoice, computerChoice); This causes recursion. Not necessary.
}
};
while (!finished) {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
alert(compare(userChoice, computerChoice));
}
Take a look at this fiddle http://jsfiddle.net/7p94axhp/

Related

return in the if statment did not show in console, cant see the returns

i have a question about my returns in the compare ,
i cant see the rusault in the console.
and ill be happy for advice where i can run codes like that?
var userChoice = prompt("Do you choose rock, paper or scissors?")
var computerChoice = Math.random()
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
var compare = function(choice1, choice2) {
if(choice1 === choice2) {
return "The result is a tie!";
}
else if (choice1 === "rock") {
if (chice2 ==="cissors") {
return "rock wins"; }
else{
return "paper wins";}
}
else if (choice1 === "paper") {
if (chice2 ==="rock") {
return "paper wins"; }
else{
return "cissors wins";}
}
else if (choice1 === "cissors") {
if (chice2 ==="paper") {
return "cissors wins"; }
else{
return "rock wins";}
}
else if (choice1 !="cissors","paper","rock") {
return "You Are So Funny!!...."; }
};
If you are returning, then you have to return to something.
A return statement in a function will return to whatever is on the left hand side of the call to the function.
var foo = some_function();
If your code isn't in a function, then returning is an error.
If you want to log something to the console, then use console.log().
You spell choice2 wrong in many places and you have to store returned value to a variable.
var userChoice = prompt("Do you choose rock, paper or scissors?")
var computerChoice = Math.random()
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
var data = compare(userChoice,computerChoice);
console.log(data);
console.log(compare(userChoice,computerChoice));
function compare(choice1, choice2) {
if(choice1 === choice2) {
return "The result is a tie!";
}
else if (choice1 === "rock") {
if (choice2 ==="cissors") {
return "rock wins"; }
else{
return "paper wins";}
}
else if (choice1 === "paper") {
if (choice2 ==="rock") {
return "paper wins"; }
else{
return "cissors wins";}
}
else if (choice1 === "cissors") {
if (choice2 ==="paper") {
return "cissors wins"; }
else{
return "rock wins";}
}
else if (choice1 !="cissors","paper","rock") {
return "You Are So Funny!!...."; }
};

Running js function from button and displaying

I have made a function called "compare" and want to run it from a button with the id "start"
<input type="button" id="start" onClick="compare(userChoice, computerChoice)" value="Start">
but when it's pressed the function does not load, also I tried to display it in this
document.getElementById("score").innerHTML = compare(userChoice, computerChoice);
but the problem with it is that it starts as the page loads
<script>
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
var compare = function(choice1, choice2){
if(choice1 === choice2){
return "The result is a tie!"
}
else if(choice1 === "rock"){
if(choice2 === "scissors"){
return "rock wins";
}
else{
return "paper wins"
}
}
else if(choice1 === "paper"){
if(choice2 === "rock"){
return "paper wins";
}
else{
return "scissors wins"
}
}
else if(choice1 === "scissors"){
if(choice2 === "paper"){
return "scissors wins";
}
else{
return "rock wins"
}
}
};
document.getElementById("player").innerHTML = userChoice;
document.getElementById("computer").innerHTML = computerChoice;
document.getElementById("score").innerHTML = compare(userChoice, computerChoice) ;
</script>
Thank you for reading
your function compare returns a string, so, calling it from onclick will result in nothing happening, you haven't specified what you want to do with the return of the function
rather than all your "returns" in that function, you could replace them with
document.getElementById("score").innerHTML =
a better way would be something like
var compare = function() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
var check = function () {
if (userChoice === computerChoice) {
return "The result is a tie!"
} else if (userChoice === "rock") {
if (computerChoice === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
return "paper wins";
} else {
return "scissors wins"
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
return "scissors wins";
} else {
return "rock wins"
}
}
}
document.getElementById("score").innerHTML = check();
};
or even
var compare = function() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
document.getElementById("score").innerHTML = function () {
if (userChoice === computerChoice) {
return "The result is a tie!"
} else if (userChoice === "rock") {
if (computerChoice === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
return "paper wins";
} else {
return "scissors wins"
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
return "scissors wins";
} else {
return "rock wins"
}
}
}(); // IIEF
};
(code edited based on comment question)
in both cases you can change the button to
<input type="button" id="start" onClick="compare()" value="Start"/>

Some trouble in javascript While using If/else

I am learning JavaScript through Codecademy. There I was asked to make a rock paper and scissor game. I did it by coding the following:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!"
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins"
} else {
return "paper wins"
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins"
} else {
return "scissors wins"
}
} else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins"
} else {
return "scissors wins"
}
};
};
compare(userChoice, computerChoice);
but later I myself added a code to stop unavailable choices like if any one choosed "egg"
var a = function() {
if (userchoice !== "scissors") {
if (userChoice !== "rock") {
if (userChoice !== "paper") {
console.log "unavilable"
};
};
};
};
to check I typed "dog" but it didn't display"unavailable"
console.log "unavilable"
should be
console.log("unavilable")
Also you need to call the function a:
compare(userChoice, computerChoice);
a();
Update:
if (userchoice !== "scissors") { //Problem is here "userChoice" and not "userchoice"
See the fiddle.
It would be better to concat the conditions
if(userchoice!="..." && userchoice!="...")
console.log(...)
or even use
switch(userchoice)
case: "rock":
case: "paper":
console.log(...);
break;
You have mistyped userChoice with userchoice.
I would recommend you to implement a method inArray. The code will be more readable this way. Here is the code for it:
function inArray(needle, haystack){
var length = haystack.length;
for(var i = 0; i < length; i++) {
if(haystack[i] == needle) return true;
}
return false;
}
Then you are just calling it in your code. Here is a jsFiddle with the complete code: jsFiddle.net

How would you make the result print "computer wins" or "user wins"

Obviously, this will print out rock/paper/scissors wins or it's a tie.
What is the best way to achieve a result like "Rock beats scissors -- Computer wins!" and such?
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
return "paper wins";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
return "scissors wins";
} else {
return "rock wins";
}
}
}
compare(userChoice,computerChoice);
I have some knowledge of functions and variables that I think is enough to solve this -- I just can't figure it out. I have less than 8 hours of javascript experience.
Also, this is not my homework, I just finished a lesson in codecademy and wondered this.
I would look into changing the strings in the program so instead of just "scissors wins" I would change that to "Scissors beats (insert corresponding choice here) - Player wins!!!"
You can find the corresponding choice by trial and error debugging or by following the logic of the nested if's and else's.
Hope this helps ;)
Here is a simple way to do it by appending to the DOM.
This example uses a do {} while () loop to keep asking the player if he wants to play, and if so asks for his choice. It then displays the result (tie or player / cpu wins) to the output element on the page. This method is nice because it keeps track of the plays for you, so if you need to do a "best 3 of 5" you can see who ultimately wins!
jQuery jsFiddle example: http://jsfiddle.net/edahqpho/3/
Pure javascript jsFiddle example: http://jsfiddle.net/edahqpho/1/
HTML
<div id='output'></div>
Javascript (pure JS example)
function play() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
return compare(userChoice, computerChoice);
}
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
return "paper wins";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
return "scissors wins";
} else {
return "rock wins";
}
}
}
var output = document.getElementById('output');
do {
var result = play();
var display = document.createElement("DIV");
var text = document.createTextNode(result);
display.appendChild(text);
output.appendChild(display);
}
while (window.confirm("Play again?"));
This next snippet demonstrates a more advanced visualization of the game using similar DOM injecting techniques (which are waaaay easier with a library like jQuery).
function play() {
do {
var userChoice = prompt("Do you choose rock, paper or scissors?").toLowerCase();
} while (userChoice != "rock" && userChoice != "paper" && userChoice != "scissors");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
var playResult = {
User: userChoice,
CPU: computerChoice,
Winner: compare(userChoice, computerChoice)
};
return playResult;
}
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
return "tie";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "player";
} else {
return "cpu";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "player";
} else {
return "cpu";
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
return "player";
} else {
return "cpu";
}
}
}
function getIcon(shape) {
var url = "";
switch (shape) {
case "paper":
url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-paper-icon.png";
break;
case "rock":
url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-rock-icon.png";
break;
case "scissors":
url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-scissors-icon.png";
break;
}
return url;
}
function game() {
var $output = $("#output");
var result = play();
$output.append("<tr><td><img src='" + getIcon(result.User) + "'/></td><td><img src='" + getIcon(result.CPU) + "'/></td><td>" + result.Winner.toUpperCase() + "</td></tr>");
setTimeout(function () {
if (window.confirm("Play again?")) {
game()
}
}, 10);
}
// start the game of all games...
game();
#output th, #output td {
margin: 10px;
padding: 10px;
font-size: 14px;
font-family:"Segoe UI", Arial, "Sans serif";
}
img {
width: 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='output'>
<tr>
<th>Player</th>
<th>CPU</th>
<th>Winner</th>
</tr>
</table>

if statements not working

I am new to js, I just wrote the basic function below based on the rock, paper, scissors game. For some reason the result of the compare function is always showing up as a
"draw" rather than the other results. What am I doing wrong here?
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
choice1 = userChoice;
choice2 = computerChoice;
var compare = function (choice1, choice2) {
if (choice1 == choice2) {
return "draw!";
}
if (choice1 == "rock") {
if (choice2 == "scissors") {
return "rock wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "paper") {
if (choice2 == "scissors") {
return "scissors wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "scissors") {
if (choice2 == "rock") {
return "rock wins!";
} else {
return "scissors wins!";
}
}
};
compare();
Thanks, Us
You're calling compare without parameters:
compare();
Therefore choice1 and choice2 both equals undefined and your game will always end up as draw.
You should try calling your compare function like this:
compare(userChoice, computerChoice);
If you define a function, the parameter list defines the names of the given variables within the scope of the function. It's not a naming convention for the variables which should be available in the function itself.
You have defined the function with two arguments:
var compare = function (choice1, choice2)
However you have invoked it with 0.
Try specifying the choices:
compare("rock", "paper");
You can't turn on function only by typing func_name() without arguments, thats like "dry shot". Read about function declaring
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
choice1 = userChoice;
choice2 = computerChoice;
function compare (choice1, choice2) {
if (choice1 == choice2) {
return "draw!";
};
if (choice1 == "rock") {
if (choice2 == "scissors") {
return "rock wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "paper") {
if (choice2 == "scissors") {
return "scissors wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "scissors") {
if (choice2 == "rock") {
return "rock wins!";
} else {
return "scissors wins!";
}
}
};
compare(choice1, choice2);

Categories