P标签没有更新

时间:2017-01-01 21:20:08

标签: javascript jquery html css ajax

我正在尝试创建一个保存在localstorage中的高分。该应用程序是一个quizz应用程序,它保存并显示在它结束时的前5个分数(它是否已完成)。这里的问题是我在html文件中创建的p标签不会被更新我在js文件中创建的高分列表中的值。这是代码:

<div id = "EndSection">
<h3>The Game is Over. Top 5 Players are:</h3>
<div class = "Player">
<p id = "Player1">xoxo</p>
<p id = "Score1">30</p>
</div>

然后我只用2个p标签复制div类播放器,直到我有5个玩家。

javascript代码:

< function SaveToDataBase (){

//Checks if they completed the quizz, and check if there time is
//enough to be top5, if its enough, then it will run newEntry
var boolean = false;
var Trigger = "score";

HighScoreList.forEach(function(entry){

  if(entry.hasOwnProperty(Trigger)){
    var value = entry[Trigger];
    /*you look in your scores, and his total time is less than theres,  then he is
    added to the list*/
    if(thetotaltimer < value){
      boolean = true;
    }
  }
});
if(boolean){
  newEntry();
}


}


function newEntry(){
//inserts on index
HighScoreList.splice(5, 0, {name: currentPlayer, score: thetotaltimer });

//sort scores
HighScoreList.sort(function(a,b){
  return a.score - b.score;
});
//starts at index 5, then takes away the index right after it (number 6).
HighScoreList.splice(5,1);
localStorage.setItem("SavedHighListObjectz", JSON.stringify(HighScoreList));

document.getElementById("Player1").innerText = JSON.parse(HighScoreList[0].name);
document.getElementById("Score1").innerText = JSON.parse(HighScoreList[0].score);
document.getElementById("Player2").innerText = JSON.parse(HighScoreList[1].name);
document.getElementById("Score2").innerText = JSON.parse(HighScoreList[1].score);
document.getElementById("Player3").innerText = JSON.parse(HighScoreList[2].name);
document.getElementById("Score3").innerText = JSON.parse(HighScoreList[2].score);
document.getElementById("Player4").innerText = JSON.parse(HighScoreList[3].name);
document.getElementById("Score4").innerText = JSON.parse(HighScoreList[3].score);
document.getElementById("Player5").innerText = JSON.parse(HighScoreList[4].name);
document.getElementById("Score5").innerText = JSON.parse(HighScoreList[4].score);
}

function init(){

//this if-statement runs if there is no highscore list already saved
if(localStorage.getItem("SavedHighListObjectz") == undefined) {
HighScoreList = [
  {'name': "Sam", 'score': 300000},
  {'name': "Markus", 'score': 554000},
  {'name': "Cody", 'score': 2210000},
  {'name': "David", 'score': 39000000},
  {'name': "Jackson", 'score': 55500000}
];
localStorage.setItem("SavedHighList", JSON.stringify(HighScoreList));

}else{
//or else we load this
HighScoreList = JSON.parse(localStorage.getItem("SavedHighListObjectz"))
   }
  }
 init();
 questions();>

提前致谢。

1 个答案:

答案 0 :(得分:0)

各种小问题阻碍了您的代码工作:

1。 你的名字和分数只是字符串 - 尝试JSON.parse它们会导致一个&#34;意外的令牌&#34;例外。你没有看到吗?确保您能够看到javascript异常(在Chrome中,按F12并点击&#34;控制台&#34;)

2。 localStorage.setItem(&#34; SavedHighList&#34;应该是localStorage.setItem(&#34; SavedHighListObjectz&#34;。为了避免这样的错误,将密钥保存为变量:

var storageKey="SavedHighListObjectz";
...
localStorage.getItem(storageKey)
...

3。 你一个玩家只有p标签吗?这可能是显而易见的,但是(在您修复了#1和#2之后),您的示例代码将在document.getElementById("Player2").innerText处轰炸,直到您为其他4个最高分添加html