Estoy practicando javascript y tengo este programa similar a DoodleJump. El punto es que quiero que se muestre una lista de puntajes altos en la pantalla cuando termine el juego, pero no funciona. Me arroja un TypeError como este ...

 Uncaught TypeError: Cannot set property 'innerHTML' of null at showHighScores (app.js:246) at checkHighScore (app.js:236) at gameOver (app.js:208) at app.js:115

Aquí hay algo de código:

Se supone que la función muestra las puntuaciones más altas...

 function showHighScores() { const highScores = JSON.parse(localStorage.getItem(HIGH_SCORES)) ?? []; const highScoreList = document.getElementById(highScores); console.log(highScores) highScoreList.innerHTML = highScores .map((score) => `<li>${score.score} - ${score.name}`) .join(''); }

Se supone que la función Verifica que un puntaje alto sea un puntaje alto.

 function checkHighScore(){ const highScores = JSON.parse(localStorage.getItem(HIGH_SCORES)) ?? []; const lowestScore = highScores[NO_OF_HIGH_SCORES - 1]?.score ?? 0; if (score > lowestScore) { saveHighScore(score, highScores); // TODO showHighScores(); // TODO } }

Para guardar las puntuaciones más altas en el almacenamiento del navegador...

 function saveHighScore(score, highScores) { const name = prompt('You got a highscore! Enter name:'); const newScore = { score, name }; // 1. Add to list highScores.push(newScore); // 2. Sort the list highScores.sort((a, b) => b.score - a.score); // 3. Select new list highScores.splice(NO_OF_HIGH_SCORES); // 4. Save to local storage localStorage.setItem(HIGH_SCORES, JSON.stringify(highScores)); };

Lo extraño es que hice un archivo console.log que muestra la variable highScores (que según el programa es nula) y se muestra un conjunto de mis puntajes actuales y anteriores, por lo que estoy bastante confundido.

Votaré a favor de la persona que me ayude con esto. Lo agradezco de antemano.