javascript - Refresh div contents without reloading page -
i'm making web page javascript , html5. wrote code adds text 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 player's xp has changed. don't want have reload page see new xp. want div displaying player stats refresh immediately, without page reload. ideas?
p.s.: using load()
isn't best solution. tried , it's not working should (the div becomes smaller , weird things happen).
update: did right now, there 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(); }
currently have function gets each data point appears in newgame
: getplayerxp
, getplayerlevel
, , on. can write corresponding set of functions set each data point. example:
function setplayerxp(player, xp) { player.xp = xp; updatestats(); }
by including call updatestats()
, ensure newgame
gets updated when necessary. make sure use setplayerxp
whenever want assign new value player attribute.
Comments
Post a Comment