CODEWITHSUNDEEP
javascripthtml
Oen44
Oen44

Reputation: 3206

Refresh div contents without reloading page

I'm making a web page with JavaScript and HTML5. I wrote some code that adds text to a 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>

Now let's say that the player's XP has changed. I don't want to have to reload the page to see the new XP. I want the div displaying the player stats to refresh immediately, without a page reload. Any ideas?

P.S.: Using load() isn't the best solution. I tried that already and it's not working as it should (the div becomes smaller and weird things happen).

Update: I did something like this right now, but is there a better approach?

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();
}

Upvotes: 2

Views: 494

Answers (1)

Michael Laszlo
Michael Laszlo

Reputation: 12239

Currently you have a function that gets each data point that appears in newGame: getPlayerXP, getPlayerLevel, and so on. You can write a corresponding set of functions to set each data point. For example:

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

By including a call to updateStats(), you ensure that newGame gets updated when necessary. Now make sure that you use setPlayerXP whenever you want to assign a new value to that player attribute.

Upvotes: 1

Related Questions