从localstorage javascript中的对象创建HTML列表

我对javascript非常陌生，我正在尝试创建一个分数列表来显示玩家的分数。玩家提交姓名首字母后，将使用对象将其存储在localStorage中，然后显示在列表中。然而，我一直在摆弄javascript，不知道为什么它会在附加列表中以“未定义”的形式返回保存的详细信息

HTML

你的问题是对的！最终得分：
提交分数
高分


回去
清分

JavaScript

formEl.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
var inputInitials=document.querySelector（“输入[name='initials']”）。value.toUpperCase（）；
//检查输入是否为空
如果（！inputInitials）{
提醒（“请输入您的姓名首字母！”）；
返回false；
} 
var playerScores=JSON.parse（localStorage.getItem（“HighScores”））| |[]；
//对象来存储首字母和分数
变量高分={
名称：inputInitials，
分数：时间限制
};
formEl.reset（）；
球员核心。推（高分）；
console.log（高分）；
setItem（“HighScores”，JSON.stringify（playerScores））；
highScoreList.style.display=“flex”；
submitcore.style.display=“无”；
createScoreList（）；
});
//创建分数列表
函数createScoreList（）{
var playerhhighscores=JSON.parse（localStorage.getItem（“HighScores”））| |[]；
list.innerHTML=“”；
对于（i=0；i
应该是

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

name和score是对象的属性名highScores
除了访问对象的方式之外，您所做的一切都很好

在createScoreList（）函数中，您正在访问：

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

但是你必须像下面这样写，因为你给出的关键名字是‘name’和‘score’：

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

您好，我看到您的问题已经有了一些很好的答案。由于您是JavaScript新手，您可以查看我写的关于这个主题的文章。它与您的解决方案非常相似：
 listItemEl.textContent = playerHighScores[i].name + " - " + playerHighScores[i].score

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

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