当尝试从等于用户正确回答多少个问题的变量访问localStorage
中存储的得分值时,我遇到了问题。我认为这与设置值完全相同,但是很可能我做错了什么,而且我缺乏经验来弄清楚。]
我想在完成按钮所在的屏幕记分板上显示用户的分数。我很容易用localStorage
行将乐谱设置到setItem(users, score)
中,但是当我想设置getItem(score)
时似乎displayUser.textContent = getItem(score)
不起作用。
我尝试了许多不同的方法,并且我总是得到null
。我还注意到,每次我向记分板提交新条目时,键的名称都会保留最后一个条目的名称,并将其存储在末尾。
我很想自己解决这个问题,但是在3个小时没有取得任何进展或取得任何领先优势之后,我想我可能会寻求帮助。我在新手训练营的班级活动中重复使用并更改了很多此代码,因此在开发过程中,只需单击完成按钮即可删除条目。
希望这里是所有相关的JavaScript
//Variables to Shorten text
var startButton = document.getElementById('startbtn')
var nextButton = document.getElementById('nextbtn')
var finishEarlyButton = document.getElementById('finishEarlyBtn')
var introSection = document.getElementById('intro')
var questionSection = document.getElementById('Question-Section')
var questionElement = document.getElementById('question')
var answerButtons = document.getElementById('Answer-Section')
var scoreboard = document.getElementById('Score-Container')
var userScore = document.getElementById('Score')
var seeScoreBtn = document.getElementById('seeScore')
var restartBtn = document.getElementById('restart')
var finishbtn = document.getElementById('finishbtn')
var userAnswer = ""
var shuffledQuestions, currentQuestionIndex
var score = 0
var userName = document.getElementById('scoreboard-input')
var leaderboard = document.getElementById('leaderboard')
var leaderboardUsers = document.getElementById('leaderboardUsers')
var users = [];
init();
function init() {
var storedUsers = JSON.parse(localStorage.getItem("Users"))
if (storedUsers !== null) {
users = storedUsers;
renderUsers();
}
}
function renderUsers() {
leaderboardUsers.innerHTML = "";
for (var i = 0; i < users.length; i++) {
var user = users[i];
var li = document.createElement("li");
li.textContent = user;
li.setAttribute("data-index", i);
var button = document.createElement("button");
button.textContent = "Complete";
var displayUser = document.createElement("button");
displayUser.textContent = (localStorage.getItem(score));
//displayUser.textContent = "test";
console.log(localStorage.getItem(users.value))
li.appendChild(displayUser);
li.appendChild(button);
leaderboardUsers.appendChild(li);
}
}
function storeUsers() {
//localStorage.setItem("users", JSON.stringify(users));
//localStorage.setItem(JSON.stringify(users), JSON.stringify(score));
localStorage.setItem(users, score);
}
leaderboard.addEventListener("submit", function() {
event.preventDefault();
var userText = userName.value.trim();
var userCorrectAnswers = score.value;
if (userText === "") {
return
}
//users.push(userCorrectAnswers);
users.push(userText);
userName.value = "";
storeUsers()
renderUsers()
console.log
})
leaderboardUsers.addEventListener("click", function(event) {
var element = event.target;
if (element.matches("button") === true) {
var index = element.parentElement.getAttribute("data-index");
users.splice(index, 1);
storeUsers();
renderUsers();
}
})
让我知道是否需要html或JS的其余部分!
仅通过查看代码,我们可以看到您正在通过以下方式访问它
var storedUsers = JSON.parse(localStorage.getItem("Users"))
并通过]存储>
localStorage.setItem(users, score);
[使用访问方式,您可以通过以下方式进行设置
localStorage.setItem("Users", JSON.stringify(users));
这是区分大小写的,这可能就是为什么在
users
函数下的第一个注释中尝试使用键storeUsers
无效的原因。
这是很多代码,但是设置和获取项目需要字符串键名和字符串值:
您没有正确使用localStorage setItem
。