I just started learning javascript and followed an exercise on codeacademy to make a text base rock paper scissors game. I wanted to show it to someone, outside of the debug console but I can't figure out how to display it in an html page.
The code in my html file is:
<HTML>
<HEAD>
<script src="rockpaperscissors.js"></script>
</HEAD>
<BODY>Choose rock, paper or scissors and write your choice in the text box
<p>
<A HREF="javascript:processOrder();">Click here to begin</A>
</p>
...
</BODY>
</HTML>
and the code in my JS is:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var puterChoice = Math.random();
if (puterChoice < 0.34) {
puterChoice = "rock";
} else if (puterChoice <= 0.67) {
puterChoice = "paper";
} else {
puterChoice = "scissors";
}
var pare = function (choice1, choice2) {
if (choice1 === choice2) return "The result is a tie!";
if (choice1 === "rock") {
if (choice2 === "scissors") return "rock wins";
else return "paper wins";
}
if (choice1 === "paper") {
if (choice2 === "rock") return "paper wins";
else return "scissors wins";
}
if (choice1 === "scissors") {
if (choice2 === "rock") return "rock wins";
else return "scissors wins";
}
};
pare(userChoice, puterChoice);
I get the prompt to choose rock paper or scissors but it does not return anything after that. I don't see the puter choice in the html and I don't know what to use to show it.
I just started learning javascript and followed an exercise on codeacademy to make a text base rock paper scissors game. I wanted to show it to someone, outside of the debug console but I can't figure out how to display it in an html page.
The code in my html file is:
<HTML>
<HEAD>
<script src="rockpaperscissors.js"></script>
</HEAD>
<BODY>Choose rock, paper or scissors and write your choice in the text box
<p>
<A HREF="javascript:processOrder();">Click here to begin</A>
</p>
...
</BODY>
</HTML>
and the code in my JS is:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var puterChoice = Math.random();
if (puterChoice < 0.34) {
puterChoice = "rock";
} else if (puterChoice <= 0.67) {
puterChoice = "paper";
} else {
puterChoice = "scissors";
}
var pare = function (choice1, choice2) {
if (choice1 === choice2) return "The result is a tie!";
if (choice1 === "rock") {
if (choice2 === "scissors") return "rock wins";
else return "paper wins";
}
if (choice1 === "paper") {
if (choice2 === "rock") return "paper wins";
else return "scissors wins";
}
if (choice1 === "scissors") {
if (choice2 === "rock") return "rock wins";
else return "scissors wins";
}
};
pare(userChoice, puterChoice);
I get the prompt to choose rock paper or scissors but it does not return anything after that. I don't see the puter choice in the html and I don't know what to use to show it.
Share Improve this question edited Jul 18, 2013 at 14:45 iConnor 20.2k14 gold badges66 silver badges97 bronze badges asked Jul 18, 2013 at 14:34 CherryCherry 1012 gold badges3 silver badges7 bronze badges 1-
Please note that the function
paredoesn't always return a result, which is not a good thing. If user presses Cancel when they are asked for their choice,userChoicewill benulland the function will not return a value. – Vadim Belyaev Commented Jul 18, 2013 at 14:51
3 Answers
Reset to default 7One easy way is to put an element with an id in your html:
<div id="ret"></div>
You can then change the last line of your javascript to:
document.getElementById("ret").innerHTML=pare(userChoice,puterChoice);
That will put the result inside of that div.
Or you could just do:
document.write(pare(userChoice,puterChoice));
Which will write the result where you put your script tag.
You need a place to display the returned result.
Change your last line of JS to
alert(pare(userChoice,puterChoice));
Nice job working out the RPS exercise. Take a look at this JSFiddle for an implementation displaying the user/puter choices and the results.
You'll notice a few key changes. First, you shouldn't link to a javascript function within an href:
<A HREF="javascript:processOrder();">Click here to begin</A>
Take a look at this great SO answer for a variety of ways you can improve upon that practice. In my example implementation, I'm using the jQuery library to create a click event handler on the Click here to begin prompt, like so:
$('#begin').click(function() {playRPS(); return false;});
Second, you'll notice the new playRPS function. This enables the user to decide when to play your game, and play it multiple times.
With the original code listed above, when the Javascript code is loaded, the browser does a few things right away and then never again:
- It launches the prompt for the user to input a value. As soon as the user enters their choice:
- It picks a random value for puterChoice and converts it to the appropriate rock/paper/scissors string value.
- It executes the pare() function.
It doesn't even wait for the user to click your Click here to begin link! Take a look instead at a function like the following:
var playRPS = function() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var pChoice = puterChoice();
var result = pare(userChoice,pChoice);
$('body').append('<p>You chose ' + userChoice + '</p>')
.append('<p>The puter chose ' + pChoice + '</p>')
.append('<p>' + result + '</p>');
};
It's short and sweet. When called (remember, it is called anytime the <a id="begin"> link is clicked, as set up with jQuery), it does everything you need to do for a round of RPS:
- It asks the user what they want to choose.
- It runs the
puterChoicefunction, generating a new random number and converting that number to a string. - It runs your
parefunction - It adds the user's choice, the puter's choice and the result returned by the
parefunction in<p>tags just before the end of the<body>element.
Now there are any number of ways this could be improved further--the results could be displayed in a prettier way. The user's input should probably be checked to see if it's a valid answer (eg. what happens if I enter "fire" into the box? Or "Paper"?), but this is a great start!