Troubleshooting Highscore Display in JavaScript Game

Other Questions JavaScript
1 
I'm working on a JavaScript game and I'm stuck with the highscore feature. The score isn't showing up correctly in the HTML.

Here's what I've tried:

```javascript
function updateBestScore() {
  let bestScore = localStorage.getItem('bestScore');
  let currentScore = gameScore;

  if (!bestScore || currentScore > parseInt(bestScore)) {
    localStorage.setItem('bestScore', currentScore);
    bestScore = currentScore;
  }

  document.getElementById('bestScore').textContent = bestScore;
}

The problem is that the score display shows ‘Highscore’ instead of the actual number. Also, when I try to access the element, I get ‘[object HTMLHeadingElement]’.

I’m pretty sure I’m close, but something’s off. Any ideas on what I’m doing wrong? How can I make sure the highscore shows up as a number after each game?

2

I’ve encountered this issue before. The problem likely stems from how you’re interacting with the DOM and handling data types. First, ensure your HTML element with id ‘bestScore’ exists and is correctly placed. Second, localStorage stores everything as strings, so you need to parse the stored value to an integer when retrieving it. Lastly, when setting the score, convert it back to a string. Here’s a refined version of your function:

function updateBestScore() {
  let bestScore = parseInt(localStorage.getItem('bestScore')) || 0;
  let currentScore = gameScore;

  if (currentScore > bestScore) {
    bestScore = currentScore;
    localStorage.setItem('bestScore', bestScore.toString());
  }

  document.getElementById('bestScore').textContent = bestScore;
}

This should resolve your issues and display the highscore correctly.

3

I ran into a similar issue when working on my JavaScript game project. The problem you’re experiencing is likely due to how you’re setting the textContent of the element.

Try using innerHTML instead of textContent, as it allows you to set HTML content within the element. Also, make sure your HTML element with id ‘bestScore’ actually exists in your DOM.

Another thing to check is the type of data you’re storing in localStorage. localStorage always stores strings, so when you retrieve the value, you might need to parse it back to a number.

Here’s a slightly modified version of your code that might help:

function updateBestScore() {
  let bestScore = parseInt(localStorage.getItem('bestScore')) || 0;
  let currentScore = gameScore;

  if (currentScore > bestScore) {
    localStorage.setItem('bestScore', currentScore.toString());
    bestScore = currentScore;
  }

  document.getElementById('bestScore').innerHTML = bestScore;
}

This should ensure that your highscore is always displayed as a number. Hope this helps!

4

hey man, i think ur problem mite be with the DOM. make sure ur ‘bestScore’ element exists and is accessible. also, try using innerText instead of textContent. it’s more reliable for setting text content. and don’t forget to convert the score to a string before setting it. hope this helps!