javascript - Change global variable using History.js -

javascript - Change global variable using History.js -

i've been trying implement history.js. i've got understanding of how getting , pushing states work, i'm having particular problem info storing component of history along using global variables.

as simple example, decided seek , set script alter colour of html box upon beingness clicked. trigger history - creating history clicking box (and colour beingness changed on each state of history).

is there way update global variable based on info (in case, updating i per click) supplied in history state's data?

html:

<div id="box">click me</div> <button id="back">back</button> <button id="forward">forward</button>

css:

#box { width: 300px; height: 300px; background-color: black; color: white; vertical-align: middle; text-align: center; display: table-cell; }

javascript:

var history = window.history; var = 0; if (history.enabled) { var state = history.getstate(); history.pushstate({count:i}, $("title").text(), state.urlpath); } else { homecoming false; } // bind statechange event history.adapter.bind(window,'statechange', function(){ state = history.getstate(); console.log(state.data, state.title, state.url); $(this).css('background-color', getcolour()); }); // trigger alter $("#div").on("click", function() { i++; history.pushstate({count:i},"state " + i,"?state=" + i); }); function getcolour() { var colours = ["red", "orange", "yellow", "green", "aqua","blue", "purple", "magenta","black"]; if (i > colours.length - 1) { = 0; } if (i < 0) { = colours.length - 1; } homecoming colours[i]; } $("#back").on("click", function() { history.back(); }); $("#forward").on("click", function() { history.forward(); });

i'm using jquery, ajaxify-html5.js , scrollto.js per recommendation other threads.

editable jsfiddle | viewable jsfiddle

after playing around ton (and reading more questions), i've figured out. i'll detail solution means others come across this.

jsfiddle view solution | jsfiddle view solution

first here's final code. note javascript has document.ready extras working outside of jsfiddle.

it's worth noting took out ajaxify-html5.js , scrollto.js out, weren't needed (and breaking code somewhere).

html:

<div id="box"> <div id="count"></div> <div id="colour"></div> </div> <button id="back">back</button> <button id="forward">forward</button>

css:

#box { width: 300px; height: 300px; background-color: white; color: white; vertical-align: middle; text-align: center; display: table-cell; } button { width: 148px; height: 40px; } #count, #colour { background-color: black; font-family: "consolas"; }

javascript:

var history = window.history; var = 0; var colour = getcolour(); var colourname = getcolourname(); $(document).ready(function() { if (history.enabled) { changehistory(); } else { homecoming false; } // bind statechange event history.adapter.bind(window,'statechange', function(){ state = history.getstate(); = state.data.count; colour = state.data.colour; colourname = state.data.colourname; changehistory(); }); // trigger alter $(document).on("click", "#box", function() { = + 1; colour = getcolour(); colourname = getcolourname(); changehistory(); }); $(document).on("click", "#back", function() { history.back(); }); $(document).on("click", "#forward", function() { history.forward(); }); }); function getcolour() { var colours = ["rgb(220,45,45)", "orange", "rgb(230,230,50)", "rgb(15,210,80)", "rgb(100,220,220)","rgb(50,80,210)", "rgb(140,20,180)", "rgb(230,70,110)","grey"]; if (i > colours.length - 1) { = 0; } if (i < 0) { = colours.length - 1; } homecoming colours[i]; } function getcolourname() { var colournames = ["red","orange","yellow","green","light blue","blue","purle","pink","grey"]; homecoming colournames[i]; } // create changes function changehistory () { $("#colour").html(colourname); $("#count").html(i); $("#box").css('background-color', colour); history.pushstate({count:i, colour: colour, colourname: colourname},"a shade of " + colourname,"?colour=" + colourname); }

so going wanted accomplish question:

clicking box add together history each history hold variables required impact global variables

its worth noting solution specifically uses variables each iteration of history powerfulness global variables, whereas programme uses global variables. variables used powerfulness interface never access ones stored in history.

let's break programme separate , simpler processes , functions. much other history.js solutions, there's things require working:

history.getstate(): gets latest history item "from stack" history.adapter.bind(window,'statechange', function() {}: event listener trigger function when window has statechange (history alter in case) history.pushstate({data}, title, url): pushes state "history stack". holds object (data), title (of tab/window) , url display. setting history:

when user clicks on box, programme should:

increment counter (i) change colour , colourname add new history stack object in

i decided separate first 2 features lastly one. function changehistory() responsible updating contents of box (from global variables) , pushing new history object in (using global variables).

changehistory() gets called whenever want add together new item of history in , update contents in box reflect new history - @ launch @ when box clicked.

when box clicked, first 2 criteria met. using existing global variables , functions, new colour , name retrieved , set global variables.

this how should behave:

box click -> increment i, alter variables -> force history

listen history change:

once history alter has been made (either clicking box, pressing back/forward buttons or browser buttons), alter needs occur.

by creating variable state = history.getstate(), have easy way of accessing info latest history stack object.

we'll utilize info history object.data assign global variables. after updating variables, we'll update view using changehistory().

this how model should work:

history changed -> update globals history -> update view

history alter occur whenever presses back, forwards or box, accounting possible changes.

javascript jquery history.js