I'm implementing a dice game, which will store the results of the 2 players. I'm having an issue saving the scores, when I console.log I get the new scores only. What is the issue here?
window.onload = (event) => {
throw_dice();
};
var scores = { player1: 0, player2: 0 };
function throw_dice() {
let x = Math.floor(Math.random() * 6) + 1;
let img1 = document.getElementById("img1");
let y = Math.floor(Math.random() * 6) + 1;
let img2 = document.getElementById("img2");
img1.src = "./images/dice" + x + ".png";
img2.src = "./images/dice" + y + ".png";
if (x > y) {
document.getElementById("title").innerHTML = "PLAYER 1 WINS";
scores.player1 = scores.player1 + 1;
} else if (x == y) {
document.getElementById("title").innerHTML = "DRAW";
} else {
document.getElementById("title").innerHTML = "PLAYER 2 WINS";
scores.player2 = scores.player2 + 1;
}
saveScores();
getScores();
}
function saveScores() {
localStorage.setItem("score", JSON.stringify(scores));
}
function getScores() {
var x = localStorage.getItem('score');
console.log('x', JSON.parse(x));
}
On pageload, you're doing
var scores = { player1: 0, player2: 0 };
and then updating that object inside throw_dice and saving to storage. On that line, you need to retrieve the object from local storage on pageload instead, otherwise you'll be never reading (and thereby overwriting) the existing scores in storage in saveScores.
var scores = JSON.parse(
localStorage.getItem('score') || '{ "player1": 0, "player2": 0 }')
);