I would like to understand what I am doing wrong to not allow the countScore to be saved into local storage (code below). I have a feeling it deals with how I call the function for playerMove and the separate 'if' statements causing the object to not be set. I don't want a complete rewrite of my code, but if that is the only option, then I can redo the code myself. Would just like to know how to get this object to save into local storage using my current code.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rock, Paper, Scissors</title>
<link rel="stylesheet" href="RPS-style.css">
</head>
<body>
<h1>Rock Paper Scissors</h1>
<button onclick="pickRock()">Rock</button>
<button onclick="pickPaper()">Paper</button>
<button onclick="pickScissors()">Scissors</button>
<button onclick="resetScore()">Reset Score</button>
<p> Click <a href="">here</a> to see final version </p>
<script src="RPS.js"></script>
</body>
</html>
JS
const countScore = {
Wins: 0,
Losses: 0,
Ties: 0
};
localStorage.getItem(JSON.parse(JSON.stringify(countScore)));
// localStorage.getItem("gameScore");
computerMove = () => {
const randomizer = Math.random();
if (randomizer >= 0 && randomizer < 1/3) {
compChoice = "Rock"
}
else if (randomizer >= 1/3 && randomizer < 2/3) {
compChoice = "Paper"
}
else if (randomizer >= 2/3 && randomizer < 1) {
compChoice = "Scissors"
};
return compChoice;
};
playerMove = (pChoice) => {
let compChoice = computerMove();
if (compChoice === pChoice) {
countScore.Ties += 1;
result = alert(`Computer chose ${compChoice} - It's a tie!\n${score()}`);
} else if (compChoice === "Scissors" && pChoice === "Rock" || compChoice === "Rock" && pChoice === "Paper" || compChoice === "Paper" && pChoice === "Scissors") {
countScore.Wins += 1;
result = alert(`Computer chose ${compChoice} - ${pChoice} beats ${compChoice}, you win!\n${score()}`);
} else if (compChoice === "Paper" && pChoice === "Rock" || compChoice === "Rock" && pChoice === "Scissors" || compChoice === "Scissors" && pChoice === "Paper") {
countScore.Losses += 1;
result = alert(`Computer chose ${compChoice} - ${compChoice} beats ${pChoice}, you lose!\n${score()}`);
};
console.log(localStorage.setItem("gameScore", JSON.stringify(countScore)));
console.log(countScore);
// console.log(countScore);
// console.log(JSON.stringify(countScore));
// console.log(JSON.parse(JSON.stringify(countScore)));
};
score = () => {
return (`Wins: ${countScore.Wins}, Losses: ${countScore.Losses}, Ties: ${countScore.Ties}`);
};
resetScore = () => {
countScore.Wins = 0;
countScore.Losses = 0;
countScore.Ties = 0;
alert(score());
};
pickRock = () => {
computerMove();
playerMove("Rock");
};
pickPaper = () => {
computerMove();
playerMove("Paper");
};
pickScissors = () => {
computerMove();
playerMove("Scissors");
};
// localStorage.setItem("gameScore", JSON.stringify(countScore));
// console.log(countScore);
// console.log(localStorage.setItem("gameScore", JSON.stringify(countScore)));
I have tried placing this step in every possible location, but will always return 'undefined'.
Tried refactoring to make the code run with less lines. Tried multiple different lines to place it on. Tried bringing the score out of the if statements to it's own separate function. Reviewed how to properly store and retrieve items from local storage.
Posting for assistance as I may be missing something obvious to the pros on here.
You should do this:
This will work after you have saved it using
If the value has not yet been saved, then
JSON.parse(localStorage.getItem("gameScore"))will returnnull.