javascript - pushState Executing When Not Supposed To -

i using html history api manipulate browser history stack control navigation using javascript on site. function have set change pages working fine, weirdly, when added pushstate each individual page change, pushstate fires automatically, last page change in function final 1 executed. means state being pushed last page change statement.

the javascript:

// change page function  function changecontent (page) {  var pages={"homepage":{title: "homepage"},"servicespage":{title: "servicespage"},"estimatespage":{title: "estimatespage"}};  hidenav();  //show home page for(var homepage in pages) {      if(page!==homepage) {          document.getelementbyid(homepage).style.display='none';     }      else {          document.getelementbyid(homepage).style.display='block';         history.pushstate("homepage", "home", "home" );         window.scrollto(0,0);     } }  //show services page for(var servicespage in pages) {      if(page!==servicespage) {          document.getelementbyid(servicespage).style.display='none';     }      else {          document.getelementbyid(servicespage).style.display='block';         history.pushstate( "servicespage", "our services", "services");         window.scrollto(0,0);     } }  //show estimates page for(var estimatespage in pages) {      if(page!==estimatespage) {          document.getelementbyid(estimatespage).style.display='none';     }      else {          document.getelementbyid(estimatespage).style.display='block';         history.pushstate( "estimatespage", "get estimate", "estimates");         window.scrollto(0,0);     } } } 

when run code, instead of each individual page pushing it's state when page clicked, state getting pushed estimates page state. i've tried using else if statements instead, , i've tried embedding each for statement self executing functions in hope might solve scope issue of kind, i've had no luck.

this onpopstate function:

// history state change display window.onpopstate = function (event) {  var state = event.state;  console.log(state);  // change history state display home page if (state === "homepage") {      document.getelementbyid("homepage").style.display = 'block'; } else {      document.getelementbyid("homepage").style.display = 'none'; }  // change history state display services page if (state === "servicespage") {      document.getelementbyid("servicespage").style.display = 'block'; } else {      document.getelementbyid("servicespage").style.display = 'none'; }  // change history state display estimates page if (state === "estimatespage") {      document.getelementbyid("estimatespage").style.display = 'block'; } else {      document.getelementbyid("estimatespage").style.display = 'none'; } }; 

for reason each new page click on has url extensions /estimatespage , when click button, cycles through pages in reverse order in written in page change function, , updates url.

i'm not totally sure issue here is, think i'm pushing state of pages automatically, weird, since rest of code executing when proper page selected.

any appreciated, think more obvious i'm making out be.

html

<div id="nav">      <div class="headerlist" onclick="changecontent('homepage');">home</div>      <div class="headerlist" onclick="changecontent('servicespage');">services</div>      <div class="headerlist" onclick="changecontent('estimatespage');">estimates</div> </div>  <div id=homepage></div> <div id=servicespage></div> <div id=estimatespage></div> 

you have 3 for loops in changecontent(). 3 loops testing same condition -- merely renamed variable.

keeping style vaguely same, might try instead, note single loop replace 3 of loops in changecontent():

        ( var p in pages ) {             if  ( page !== p ) {                 document.getelementbyid( p ).style.display = 'none';             }             else {                 document.getelementbyid( p ).style.display = 'block';                 if ( p === "homepage" )                     history.pushstate( "homepage", "home", "home" );                 else if ( p === "servicespage" )                     history.pushstate( "servicespage", "our services", "services");                 else if ( p === "estimatespage" )                     history.pushstate( "estimatespage", "get estimate", "estimates");                                     window.scrollto( 0, 0 );             }         }