javascript - Function ordering properly working? -

i new html/css/js , not understanding or missing completely. trying update variable of "citizencost" using math.pow(2, numcitizens) part working. part having trouble updating citizencost correct number , having html represent correct number. right updates it's behind

ie: should x = 2^1 x = 2^2 on , forth

however in html doesn't update accordingly behind 1 equation if real cost x = 2^2. text show x = 2^1. unless player clicks button again.

function buycitizen(){     citizencost = math.pow(2, numcitizens);     document.getelementbyid("citizencost").innerhtml = "cost of citizen " + citizencost;     if(land >= citizencost){         land = land - citizencost;         eps = eps + 2;         numcitizens++;         document.getelementbyid("numcitizens").innerhtml = numcitizens;     }     else         document.getelementbyid("systemmessage").innerhtml = "you not have enough land resources provide more citizens right now!";     settimeout(systemclear, 5000)} 

here fiddle demonstrating issue

https://jsfiddle.net/traberjkt/yaq0rbad/

here git

https://github.com/traberjkt/conquest

i have tried setting timer text of citizencost updates every second. have thought , tried putting cost equation in separate function , re-locating somewhere else in function. sadly have had no luck figuring out. or pointing me in right direction appreciated!

maybe should make new function called morecitizens(howmany):

function morecitizens(howmany) {   numcitizens += howmany;   document.getelementbyid("numcitizens").innerhtml = numcitizens;   citizencost = math.pow(2, numcitizens);   document.getelementbyid("citizencost").innerhtml = "cost of citizen " + citizencost; } 

then instead of

  numcitizens++; 

you can write

  morecitizens(1); 

and update cost , count fields.