Rock Paper Scissors in a website

Community Off Topic
1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<In what way does your code behave incorrectly? Include ALL error messages.>

``` 
<do not remove the three backticks above>

I am currently working on the code for a website. (I have finished the rock paper scissors game) I want to know how to implement it into a practice website. I have the actual code finished, but i want it to be that you can press a button to play the game. How would i go about doing this. Thanks!!
2

Do you know HTML? @ithortureu?

3

yes. I know html, css, a bit of jquery and a unit past the RPS game on this javascript course.

4

First of all you have to make a page with HTML.
So far, and until the end of the tutorial, you will print to the console. You xan find it by pressing f12 in abrowser.
You have to learn how to “connect” the HTML with the javascript.

You can either

  1. execute a javascript function on an event (like click on a buuton)
  2. let the javascript change the HTML

To write javascript in an HTML file you need to write it between these tags

or save it in a js file (name.js) and then type this
<script src="name.js"> </script>

HOW TO:

  1. set an attribute in the HTML element you want to make an action like this:
    <button onclick="mySuperCoolFunction()" > Click me </button>

  2. to “find” an HTML element with javascript you “name” it by giving an ID like this:
    <p id="myParagraph"> TEXT </p>

and then you need to access that with javascript you type:
document.getElementById("myParagraph");

So the line above is the way call the element. You can store it in a variable, by the way:
var myPar = document.getElementById("myParagraph");

The if you like to change the text inside your paragraph you can type:

document.getElementById("myParagraph").innerHTML += "More text";
or
myPar.innerHTML += "More Text";

This is the very basic idea.
Some research on internet might help.

More on javascript events: http://www.w3schools.com/js/js_events.asp

What you might want to make is something like.

<img  src="paper" id="paper" onclick="game('paper')"/>
<img  src="rock" id="rock" onclick="game('rock')"/>
<img src="scissors" id="scissors" onclick="game('scissors')"/>

<p id="result"> </p>

<script>
    var game = function(tool) {
    //replace the prompt with the parameter.
   user = tool;
  var result = "My code found the result"); 
    document.getElementById("result").innerHTML = "result";
  }
</script>

This is just a very simple and basic demostration to give an idea, this might not work.

GOOD LUCK!

5

This is helpful. Thanks! What I am looking for is just a button I can click to run the game. I have the code for the game itself. I just need help to do the button. Thanks again!

1 Like
6

Then make a button… When he clicks the button he runs the function like this:

<html>
<body>
<button id="button" onclick="funcToRun();">Play Rock Paper Scissors</button>
<script>
function funcToRun(){
alert("Your Rock Paper Scissors Logic Here...")
}
</script>
</body>
</html>

Code above in preview…:

See the Pen MypeqQ by aMANU (@amanuel2) on CodePen.

7

So let me make sure I understand this…
Where it says FuncToRun I put the function name, In the parenthesis on alert, I put all the RPS code right? Thanks!

8

Yes. You should know this if you went over the javascript tutorial in codecademy… Its basic VannilaJS.