How to fix output table for rock paper scissor lizard spock program?

Question

Here is the particular code I am having trouble with:

var Rock = document.getElementById('Rock').addEventListener('click', run);
var Paper = document.getElementById('Paper').addEventListener('click', run);
var Scissors = document.getElementById('Scissors').addEventListener('click', run);
var Lizard = document.getElementById('Lizard').addEventListener('click', run);
var Spock = document.getElementById('Spock').addEventListener('click', run);

var computerChoice;
var playerChoice;

var player = document.getElementById('player');
var computer = document.getElementById('computer');
var outcome = document.getElementById('outcome');

function run() {
    playerChoice = this.innerText;
    computerGamble();
    compare();
}
var playerChoice = 0
var computerChoice = 0

localStorage.setitem('win', '1')
localStorage.setitem('loss','2')

function computerGamble() {
    var dice = Math.random();
    if (dice <= 0.2) {
        computerChoice = "Rock";
    } else if (dice <= 0.4) {
        computerChoice = "Paper";
    } else if (dice <= 0.6) {
        computerChoice = "Scissors";
    } else if (dice <= 0.8) {
      computerChoice = "Lizard";
    } else{
      computerChoice = "Spock";
    }
}


 function compare() {
    player.innerHTML = "You have chosen " + playerChoice;
    computer.innerHTML = "Computer chooses " + computerChoice;

    if (playerChoice == computerChoice) {
        outcome.innerHTML = "Stalemate";

    } else if (playerChoice === "Rock" && computerChoice === "Paper") {
        outcome.innerHTML = "Paper has trapped the rock, you lose!";
     counter.loss += 1;
    } else if (playerChoice === "Rock" && computerChoice === "Scissors") {
        outcome.innerHTML = "Rock has broken the scissors, you win!";
   counter.win += 1;

    } else if (playerChoice === "Paper" && computerChoice === "Rock") {
        outcome.innerHTML = "Rock has been trapped by paper, you win!";
    } else if (playerChoice === "Paper" && computerChoice === "Scissors") {
        outcome.innerHTML = "Scissors snap the paper in half, you lose!";


    } else if (playerChoice === "Scissors" && computerChoice === "Rock") {
        outcome.innerHTML = "Rock has broken the scissors, you lose!";
    } else if (playerChoice === "Scissors" && computerChoice === "Paper") {
        outcome.innerHTML = "Scissor snaps the paper in half, you win!";

  } else if (playerChoice === "Rock" && computerChoice === "Spock") {
    outcome.innerHTML = "Spock vaporizes rock, you lose!";
  } else if (playerChoice === "Rock" && computerChoice === "Lizard") {
    outcome.innerHTML = "Lizard gets knocked unconcious by rock, victory!";


  } else if (playerChoice === "Paper" && computerChoice === "Spock") {
    outcome.innerHTML = "Spock has been disproved by paper, you win!";
  } else if (playerChoice === "Paper" && computerChoice === "Lizard") {
    outcome.innerHTML = "Lizard ate the paper, defeat!";


  } else if (playerChoice === "Scissors" && computerChoice === "Spock") {
    outcome.innerHTML = "Spock smashes scissors, you lose!";
  } else if (playerChoice === "Scissors" && computerChoice === "Lizard") {
    outcome.innerHTML = "Victory!";

  } else if (playerChoice === "Lizard" && computerChoice === "Scissors") {
    outcome.innerHTML = "Defeat!";
  } else if (playerChoice === "Lizard" && computerChoice === "Spock") {
    outcome.innerHTML = "Victory!";


  } else if (playerChoice === "Lizard" && computerChoice === "Paper") {
    outcome.innerHTML = "Victory!";
  } else if (playerChoice === "Lizard" && computerChoice === "Rock") {
    outcome.innerHTML = "Defeat!";


  } else if (playerChoice === "Spock" && computerChoice === "Paper") {
    outcome.innerHTML = "Defeat!";
  } else if (playerChoice === "Spock" && computerChoice === "Rock") {
    outcome.innerHTML = "Victory!";

  } else if (playerChoice === "Spock" && computerChoice === "Lizard") {
    outcome.innerHTML = "Defeat!";
  } else if (playerChoice === "Spock" && computerChoice === "Scissors") {
    outcome.innerHTML = "Victory!";

    }
 }

I am attempting to implement the wins and losses in a scoreboard as you can see in the website, however, my scoreboard simply does not work.

So far, I have tried to use window.Sessionstorage and window.localStorage but my table does not seem to change whatsoever

I am assuming the downvotes were because I didn't immediately upload the example code, I apologize in advance — Mark, Dec 02 '19 at 01:14
I didn't downvote, though I do wonder why you closed your previous question (59130705) to ask essentially the exact same one. The answer to your unanswered question there is yes, `window.localStorage()` is enough for whoever is playing. However, you don't appear to have actually added any code which makes *use* of `localStorage()` (as you claim in this question). — Obsidian Age, Dec 02 '19 at 01:17
@ObsidianAge Thought my last question was terribly stated so I decided to make it more simple with this one and I edited the post with my attempt at using ```Window.localStorage()``` — Mark, Dec 02 '19 at 01:27
Also check out: https://stackoverflow.com/questions/22623331/rock-paper-scissors-lizard-spock-in-javascript/22623993#22623993 and http://jsfiddle.net/h3TcP/4/ for some optimisation ideas — Jon P, Dec 02 '19 at 01:53
Please include all code relevant to the problem (HTML and CSS) in the question itself. Preferably as a [MCVE]. Don't make us go off site to find important context. Make it as easy as possible for us to help you. — Jon P, Dec 02 '19 at 01:56
I thought maybe adding both CSS and HTML and JS together would be too much for one post, I guess I was wrong! — Mark, Dec 02 '19 at 02:00

Aaron Plocharczyk · Accepted Answer · 2019-12-02T01:44:56.197

I cleaned up the code and added a record table.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>RPSLS </title>
        <script src="https://randojs.com/1.0.0.js"></script>
        <script>
            function onload(){
                document.getElementById('Rock').addEventListener('click', run);
                document.getElementById('Paper').addEventListener('click', run);
                document.getElementById('Scissors').addEventListener('click', run);
                document.getElementById('Lizard').addEventListener('click', run);
                document.getElementById('Spock').addEventListener('click', run);
            }

            function run() {
                var playerChoice = this.innerText;
                var computerChoice = rando(["Rock", "Paper", "Scissors", "Lizard", "Spock"]).value;

                document.getElementById('player').innerHTML = "You have chosen " + playerChoice;
                document.getElementById('computer').innerHTML = "Computer chooses " + computerChoice;

                if(playerChoice == computerChoice) {
                    //tie
                    document.getElementById('outcome').innerHTML = "Stalemate";
                    addToRecord(playerChoice, computerChoice, "tied");
                }
                else if(playerChoice == "Rock" && ["Spock", "Paper"].indexOf(computerChoice) > -1 || 
                    playerChoice == "Paper" && ["Scissors", "Lizard"].indexOf(computerChoice) > -1 || 
                    playerChoice == "Scissors" && ["Rock, Spock"].indexOf(computerChoice) > -1 || 
                    playerChoice == "Lizard" && ["Rock", "Scissors"].indexOf(computerChoice) > -1 || 
                    playerChoice == "Spock" && ["Paper", "Lizard"].indexOf(computerChoice) > -1){
                    //player loses
                    document.getElementById('outcome').innerHTML = getActionPhrase([playerChoice, computerChoice]) + ", you lose!";
                    addToRecord(playerChoice, computerChoice, "lost");
                }
                else{
                    //player wins
                    document.getElementById('outcome').innerHTML = getActionPhrase([playerChoice, computerChoice]) + ", you win!";
                    addToRecord(playerChoice, computerChoice, "won");
                }
            }

            function getActionPhrase(choiceArray){
                if(choiceArray.indexOf("Rock") > -1 && choiceArray.indexOf("Paper") > -1) return "Paper has trapped the rock";
                if(choiceArray.indexOf("Rock") > -1 && choiceArray.indexOf("Scissors") > -1) return "Rock has broken the scissors";
                if(choiceArray.indexOf("Rock") > -1 && choiceArray.indexOf("Lizard") > -1) return "Lizard gets knocked unconcious by rock";
                if(choiceArray.indexOf("Rock") > -1 && choiceArray.indexOf("Spock") > -1) return "Spock vaporizes rock";
                if(choiceArray.indexOf("Paper") > -1 && choiceArray.indexOf("Scissors") > -1) return "Scissors snap the paper in half";
                if(choiceArray.indexOf("Paper") > -1 && choiceArray.indexOf("Lizard") > -1) return "Lizard ate the paper";
                if(choiceArray.indexOf("Paper") > -1 && choiceArray.indexOf("Spock") > -1) return "Spock has been disproved by paper";
                if(choiceArray.indexOf("Scissors") > -1 && choiceArray.indexOf("Lizard") > -1) return "Scissors have decapitated the lizard";
                if(choiceArray.indexOf("Scissors") > -1 && choiceArray.indexOf("Spock") > -1) return "Spock smashes the scissors";
                if(choiceArray.indexOf("Lizard") > -1 && choiceArray.indexOf("Spock") > -1) return "Lizard poisons Spock";
            }

            function addToRecord(playerChoice, computerChoice, result){
                document.getElementById('record').innerHTML += "<tr><td>" + playerChoice + "</td><td>" + computerChoice + "</td><td>" + result + "</td></tr>";
                var recordSpan = document.getElementById('record').getElementsByTagName('span')[["won", "lost", "tied"].indexOf(result)];
                recordSpan.innerHTML = Number(recordSpan.innerHTML) + 1;
            }
        </script>
        <style>
            /*I HAD TO TAKE OUT YOUR CUSTOM STYLING BECAUSE THE ANSWER WAS TOO LONG.*/

            #record{
                margin:auto;
                border-collapse:collapse;
            }

            #record td{
                padding:5px 10px;
            }

            #record tbody:first-of-type td{
                border-bottom:1px solid #000;
            }
        </style>
    </head>
    <body onload="onload();">
        <h1> For Mrs. Romero (RPSLS PROJECT) </h1>
        <h2>Rock, scissors, paper, lizard, spock, shake..!</h2>
        <div class="button-box">
            <button id="Rock">Rock</button>
            <button id="Paper">Paper</button>
            <button id="Scissors">Scissors</button>
            <button id="Lizard">Lizard</button>
            <button id="Spock">Spock</button>
        </div>
        <h5 id="player"></h5>
        <h5 id="computer"></h5>
        <h3 id="outcome"></h3>
        <table id="record">
            <tr>
                <td><span>0</span> wins.</td>
                <td><span>0</span> losses.</td>
                <td><span>0</span> ties.</td>
            </tr>
        </table>
    </body>
</html>

It seems like this is what you meant by "scoreboard" when I read your other post, which got deleted. It sounded like you just want the player to be able to see their own record until they close the tab. If you need the scoreboard to persist after the user closes the tab, let me know.

I do not need the scoreboard to persist (a global scoreboard is not necessary) but I'm a bit confused about the way you formatted the code. Top to bottom is the html file, that I understand, but essentially what happens when I try using your code is my entire project goes blank. I suspect it has something to do with the .js and .html? — Mark, Dec 02 '19 at 01:47
I've basically combined all the css and javascript directly into the html file. You should be able to directly replace my "/*I HAD TO TAKE OUT YOUR CUSTOM STYLING BECAUSE THE ANSWER WAS TOO LONG.*/" comment with your own css from your css file and then save all the code I've provided as its own html file and just open that html file. — Aaron Plocharczyk, Dec 02 '19 at 01:53
I can provide separate css, js, and html files in a more similar format to what you're used to if that's helpful. — Aaron Plocharczyk, Dec 02 '19 at 01:54
Haha! I never doubted your code, matter of fact it looks incredibly well and I like what you did with the scoreboard. The problem was that I forgot about the original CSS file that was already there and it caused my entire project to appear blank on Atom. — Mark, Dec 02 '19 at 02:06
Just want to make sure you get what you need! Thanks for accepting the answer. Let me know if you've figured it out or if I can still help at all. — Aaron Plocharczyk, Dec 02 '19 at 02:08

How to fix output table for rock paper scissor lizard spock program?

1 Answers1