1

I am nearly finished making this test application in JavaScript. Basically, it's rock paper scissors, When you click one of the buttons, it sends the value to JavaScript and the value is compared with the computer's, which uses Math.random(). However, when ever I try to keep score, it is immediately cleared after submit, even though it is not part of the form, rather it is called by the form. I am not telling JavaScript to refresh the page. Here is the code:

var playerAnswer;
var computer;
var z2 = document.getElementById("playScore").innerHTML;
var z3 = document.getElementById("compScore").innerHTML;
function getCompAnswer(){
var x = Math.random();
if(x >= 0 && x <= 0.333333333){computer = "Rock";}
if(x > 0.333333333 && x <= 0.666666666){computer = "Paper";}
if(x > 0.666666666 && x <= 1){computer = "Scissors";}
}
function retrievePlayerData(){
document.forms[0].submit();
var y1 = document.getElementById('rock').checked;
var y2 = document.getElementById('paper').checked;
var y3 = document.getElementById('scissors').checked;
if(y1 == true){playerAnswer = "Rock"}
if(y2 == true){playerAnswer = "Paper"}
if(y3 == true){playerAnswer = "Scissors"}
compareResults();
}
function compareResults(){
var z1 = document.getElementById("gamemsg").innerHTML;
if(playerAnswer == computer){z1 = "It was a tie; you both had " + computer.toLowerCase() + ".";}
if(playerAnswer == "Rock" && computer == "Paper"){z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();}
if(playerAnswer == "Paper" && computer == "Scissors"){z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();}
if(playerAnswer == "Scissors" && computer == "Rock"){z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();}
if(playerAnswer == "Rock" && computer == "Scissors"){z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();}
if(playerAnswer == "Paper" && computer == "Rock"){z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();}
if(playerAnswer == "Scissors" && computer == "Paper"){z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();}
alert(z1);
getCompAnswer();
}
function addComp(){document.getElementById("compScore").innerHTML++;}
function addPlayer(){document.getElementById("playScore").innerHTML++;}

HTML:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>Rock. Paper, Scissors</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body onLoad="getCompAnswer();"><form id="form-id">
  <div id="test"></div>
</head><div class="formstyle">
Choose one: <br>
<input type="radio" id="rock" name="game" onClick="retrievePlayerData();">
Rock
<input type="radio" id="paper" name="game" onClick="retrievePlayerData();">
Paper
<input type="radio" id="scissors" name="game" onClick="retrievePlayerData();">
Scissors
</div>
</form>
<div id="play"></div>
<div class="scoreboard">
<table>
<tr>
<th> You
</th>
<th> The Computer
</th>
</tr>
<tr>
<td id="playScore">
</td>
<td id="compScore">
</td>
</tr>
</table>
</div>
<div id="gamemsg"></div>
<script src="script.js"></script>
</body>
</html>

If anyone could tell me how to store the value after the final comparison is made and make it a part of the HTML document(and be repeated according to the score) it would be much appreciated.

2 Answers 2

2

When you submit an html form, it will clear all your javascript. That's kind of what a submit action does.

You can either:

  1. Not submit the form - just keep everything in memory on the page
  2. Submit the form to your webserver, but then populate the data back onto your page
  3. Store the data in a cookie, so its passed to your server, then back again
  4. Store the data in client side storage.

(...and it's likely I've missed some options).

From the looks of your page, you may just have to remove or comment out this line:

document.forms[0].submit();
1
  • Thanks! Removing that line did it perfectly. :) I thought the values wouldn't be stored if the form wasn't submitted, but I'm glad that I was wrong.
    – ajc2000
    Aug 20, 2014 at 2:41
2

EDIT: For some reason, this only works on certain (very select) platforms. In the area that I fixed this in (Mozilla WebMaker: https://thimble.webmaker.org/en-US/project/73537/edit), it worked. But in an actual webpage, it didn't. Sorry.

Formatting is important.

Errors:
You closed <head> twice
In the JS, you forgot 3 semicolons(;).
Fixed code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width" />
        <title>Rock. Paper, Scissors</title>

    </head>
    <body onLoad="getCompAnswer()">
        <form id="form-id">
            <div id="test">
            </div>
            <div class="formstyle">
                Choose one: <br>
                <input type="radio" id="rock" name="game" onClick="retrievePlayerData()">
                Rock
                <input type="radio" id="paper" name="game" onClick="retrievePlayerData();">
                Paper
                <input type="radio" id="scissors" name="game" onClick="retrievePlayerData();">
                Scissors
            </div>
        </form>
        <div id="play">
        </div>
        <div class="scoreboard">
            <table>
                <tr>
                    <th>
                         You
                    </th>
                    <th>
                         The Computer
                    </th>
                </tr>
                <tr>
                    <td id="playScore">
                    </td>
                    <td id="compScore">
                    </td>
                </tr>
            </table>
        </div>
        <div id="gamemsg">
        </div>
        <script>
            var playerAnswer;
            var computer;
            var z2 = document.getElementById("playScore").innerHTML;
            var z3 = document.getElementById("compScore").innerHTML;
            function getCompAnswer(){
                var x = Math.random();
                if (x >= 0 && x <= 0.333333333) {
                    computer = "Rock";
                }
                if (x > 0.333333333 && x <= 0.666666666) {
                    computer = "Paper";
                }
                if (x > 0.666666666 && x <= 1) {
                    computer = "Scissors";
                }
            }
            function retrievePlayerData() {
                document.forms[0].submit();
                var y1 = document.getElementById('rock').checked;
                var y2 = document.getElementById('paper').checked;
                var y3 = document.getElementById('scissors').checked;
                if (y1 == true) {
                    playerAnswer = "Rock";
                }
                if (y2 == true) {
                    playerAnswer = "Paper";
                }
                if (y3 == true) {
                    playerAnswer = "Scissors";
                }
                compareResults();
            }
            function compareResults() {
                var z1 = document.getElementById("gamemsg").innerHTML;
                if (playerAnswer == computer) {
                    z1 = "It was a tie; you both had " + computer.toLowerCase() + ".";
                }
                if (playerAnswer == "Rock" && computer == "Paper") {
                    z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();
                }
                if (playerAnswer == "Paper" && computer == "Scissors") {
                    z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();
                }
                if (playerAnswer == "Scissors" && computer == "Rock") {
                    z1 = "You lost; the computer had " + computer.toLowerCase() + ".";addComp();
                }
                if (playerAnswer == "Rock" && computer == "Scissors") {
                    z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();
                }
                if (playerAnswer == "Paper" && computer == "Rock") {
                    z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();
                }
                if (playerAnswer == "Scissors" && computer == "Paper") {
                    z1 = "You won; the computer had " + computer.toLowerCase() + ".";addPlayer();
                }
                alert(z1);
                getCompAnswer();
            }
            function addComp() {
                document.getElementById("compScore").innerHTML++;
            }
            function addPlayer() {
                document.getElementById("playScore").innerHTML++;
            }
        </script>
    </body>
</html>

Here is a link to the finished code on Mozilla Webmaker:
https://brandonwebmaker2.makes.org/thimble/MTA5MjU1MDkxMg==/rock-paper-scissors

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.