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 }')
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.