javascript - 在不重新加载页面的情况下刷新 div 内容

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。