How do you get JavaScript variable to update to another value after going through a function?

Question

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();
    }

This: "_Every time the page refreshes the variables return their original values._" is because each time the page reloads it reloads and runs the JavaScript as if it had never seen it before. You should review [How Browsers Work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work) - every step that is described in that link happens when "_you reload the page_". — Randy Casburn, Sep 12 '21 at 23:39
localeStorage is your new friend : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage — Mister Jojo, Sep 12 '21 at 23:48

score 0 · Answer 1 · answered Sep 12 '21 at 23:50

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!

How do you get JavaScript variable to update to another value after going through a function?

1 Answers1