Every time the page refreshes the variables return their original values. I have it so that every time the button is pressed the number displayed increases by one. How would I go about making it so that the variable remains updated until the page is closed? And then how would I go about using those variables to update information in real-time.
HTML
<h1>y = (<span id="count">1</span><button onclick="plusOne(count)">Rise</button></h1>
<h2> / <span id="count2">1</span><button onclick="plusRun(count2)">Run</button>) x + </h2>
<h3><span id="count3">0</span><button onclick="plusB(count3)">b</button></h3>
JavaScript
var rise = 1;
var run = 1;
var b = 0;
function plusOne(count) {
rise++;
if (rise > 9) {
rise = 1
}
count.textContent = rise.toString();
}
function plusRun(count2) {
run++;
if (run > 9) {
run = 1
}
count2.textContent = run.toString();
}
function plusB(count3) {
b++;
if (b > 9) {
b = -9
}
count3.textContent = b.toString();
}
When the page is refreshed, the browser will run the JavaScript file like it is the first time it has ever seen it. Refreshing the page has the same effect as closing down the browser, and reopening the web page.
So the variables will be initialized like you have them at the top of the file upon refresh.
var rise = 1;
var run = 1;
var b = 0;
If you need to store data that will persist when the page refreshes or the browser is closed, that is possible with local storage!