Create HTML list from object in localstorage javascript

Question

I'm pretty new to javascript and I'm trying to create a score list to display player scores. Once the player submits their initials it is stored in localStorage using an object and then it is displayed in a list. However, I've been fiddling with the javascript and not sure why it returns the saved details as "undefined" in the appended list.

HTML

     <section id="submit-score" class="score-submit">
        <div class="scores">
            <h2>You got<span id="score"></span>questions correct! Final score: <span id="final-score"></span></h2>
            <form class="score-form">
                <div>
                    <input type="text" id="initials" name="initials" placeholder="Type in your initials">
                </div>
                <div>
                    <button class="score-btn" id="save-score" type="submit">Submit Score</button>   
                </div>
            </form>
        </div>
    </section>

<section id="highscores" class="highscores">
        <div class="highscore-container">
            <h2>High Scores</h2>
            <div id="highscorelist" class="scorelist">
                <ul id="list-high-scores">
                <!-- SCORE LIST GENERATED HERE -->
                </ul>
                <button class="score-btn" id="back-btn" type="submit">Go Back</button>
                <button class="score-btn" id="clear-score" type="submit">Clear Scores</button>
            </div>
        </div>
    </section>

JavaScript

formEl.addEventListener("submit", function(event){
    event.preventDefault();
    var inputInitials = document.querySelector("input[name='initials']").value.toUpperCase();
    
    //check if input is null
    if (!inputInitials) {
        alert("Please type in your initials!");
        return false;
    } 
        var playerScores = JSON.parse(localStorage.getItem("HighScores")) || [];

        //object to store initials and score
        var highScores = {
            name: inputInitials,
            score: timeLeft
        };

        formEl.reset();
        playerScores.push(highScores);
        console.log(highScores);

        localStorage.setItem("HighScores", JSON.stringify(playerScores));

        highScoreList.style.display = "flex";
        submitScore.style.display = "none";
        createScoreList();

});

//Create score list
function createScoreList() {
    var playerHighScores = JSON.parse(localStorage.getItem("HighScores")) || [];
    list.innerHTML="";
     for (i = 0; i<playerHighScores.length; i++){
        var listItemEl = document.createElement("li");
        listItemEl.textContent = playerHighScores[i].inputInitials + " - " + playerHighScores[i].timeLeft;
        list.appendChild(listItemEl);
    }
}

question from:https://stackoverflow.com/questions/65648309/create-html-list-from-object-in-localstorage-javascript

Answer 1

 listItemEl.textContent = playerHighScores[i].inputInitials + " - " + playerHighScores[i].timeLeft;

should be

 listItemEl.textContent = playerHighScores[i].name + " - " + playerHighScores[i].score

name and score are the property names of the object highScores