I wrote a rock, paper, scissor game and set the score in local storage using getItem and setItem .I wrote a paragraph with class=jsscore and tried to display the HTML content inside the script with a query selector but I couldn't do it. what am I doing wrong?
<!DOCTYPE html>
<title>video exercises</title>
<body>
<script>
let score=
JSON.parse(localStorage.getItem
('score')) ||{
wins:0,
losses:0,
Ties:0
};
document.querySelector('.js-score').innerHTML = `wins: ${score.wins}, losses: ${score.losses},Ties: ${score.Ties}`;
function pickComputerMove()
{
const randomNumber= Math.random();
if(randomNumber >=0 && randomNumber <1/3)
{
computerMove='rock';
}
else if(randomNumber >=1/3 && randomNumber <2/3)
{
computerMove='paper';
}
else if(randomNumber >=2/3 && randomNumber <1)
{
computerMove='scissors';
}
return computerMove;
}
function playGame(playerMove){
const computerMove=pickComputerMove();
let result='';
if(playerMove === 'scissors')
{
if(computerMove === 'rock')
{
result='you lose';
}
else if(computerMove ==='paper')
{
result='you win';
}
else if(computerMove ==='scissors')
{
result='Tie';
}
if(result === 'you win'){
score.wins +=1;
}
else if(result === 'you lose'){
score.losses +=1;
}
else if(result ==='Tie'){
score.Ties +=1;
}
localStorage.setItem('score',JSON.stringify(score));
alert(`you picked ${playerMove},
computer picked ${computerMove},${result}
wins: ${score.wins},losses: ${score.losses},Ties: ${score.Ties}`);
}
else if(playerMove ==='rock')
{
if(computerMove ==='rock')
{
result='Tie';
}
else if(computerMove ==='paper')
{
result='you lose';
}
else if(computerMove ==='scissors')
{
result='you win';
}
if(result === 'you win'){
score.wins +=1;
}
else if(result === 'you lose'){
score.losses +=1;
}
else if(result ==='Tie'){
score.Ties +=1;
}
alert(`you picked ${playerMove},
computer picked ${computerMove},${result}
wins: ${score.wins},losses: ${score.losses},Ties: ${score.Ties}`);
}
else if(playerMove ==='paper')
{
if(computerMove ==='rock')
{
result='you win';
}
else if(computerMove ==='paper')
{
result='Tie';
}
else if(computerMove ==='scissors')
{
result='you loose';
}
if(result === 'you win'){
score.wins +=1;
}
else if(result === 'you loose'){
score.losses +=1;
}
else if(result ==='Tie'){
score.Ties +=1;
}
alert(`you picked ${playerMove},
computer picked ${computerMove},${result}
wins: ${score.wins},losses: ${score.losses},Ties: ${score.Ties}`);
}
}
</script>
<button onclick="
playGame('rock');
">Rock</button>
<button onclick="
playGame('paper');
">paper</button>
<button onclick="
playGame('scissors');
">scissors</button>
<p class="js-score"></p>
<button onclick="
score.wins=0;
score.losses=0;
score.Ties=0;
localStorage.removeItem('score');
">Reset score</button>
</body>
</html>
</body>
</html>
I also added an extra button called restore button,it restores and sets all the values to zero