Question

我正在制作一个包含JavaScript和HTML5的网页。我写了一些代码，将文本添加到div。

<script type="text/javascript">
            var newGame = document.getElementById('playerStats');
            newGame.innerHTML += 'Name: ' + getPlayerName() + '<br/>';
            newGame.innerHTML += 'Class: ' + getPlayerClass() + '<br/>';
            newGame.innerHTML += 'Level: ' + getPlayerLevel() + '<br/>';
            newGame.innerHTML += 'XP: ' + getPlayerXP() + ' / ' + needXP[getPlayerLevel()];
</script>

现在让我们假设玩家的XP已经改变了。我不想重新加载页面来查看新的XP。我希望显示玩家统计数据的div能够立即刷新，而不会重新加载页面。有什么想法吗？

P.S。：使用load()不是最好的解决方案。我已经尝试了它并且它不能正常工作（div变得更小并且发生奇怪的事情）。

更新：我现在做了类似的事情，但有更好的方法吗？

function updateStats(){
    var newGame = document.getElementById('playerStats');
    newGame.innerHTML = '';
    newGame.innerHTML += 'Name: ' + getPlayerName() + '<br/>';
    newGame.innerHTML += 'Class: ' + getPlayerClass() + '<br/>';
    newGame.innerHTML += 'Level: ' + getPlayerLevel() + '<br/>';
    newGame.innerHTML += 'XP: ' + getPlayerXP() + ' / ' + needXP[getPlayerLevel()];
}

function addXP() {
    player.XP++;
    if(player.XP >= needXP[getPlayerLevel()]){
        player.Level++;
        player.XP = 0;
        alert('Level UP!');
    }
    store.set('player', { Name: getPlayerName(), Class: getPlayerClass(), Level: getPlayerLevel(), XP: player.XP });
    updateStats();
}

Answer 1

目前，您有一个功能可以获取newGame中显示的每个数据点：getPlayerXP，getPlayerLevel，依此类推。您可以编写一组相应的函数来设置每个数据点。例如：

function setPlayerXP(player, xp) {
  player.xp = xp;
  updateStats();
}

通过调用updateStats()，您可以确保在必要时更新newGame。现在，只要您想为该播放器属性分配新值，请确保使用setPlayerXP。

刷新div内容而不重新加载页面

1 个答案: