Refresh javascript variables without refreshing the page

Question

So I have a variable that is constantly changing (num) and it's controlled by other page, but to get the value from other page to another, I need to refresh the page. I tried auto refresh, but I have a youtube video playing and it would stop every refresh. Is there any way to refresh the variables only? Or constantly doing the javascript of the file so the values are always being updated.

EDIT: I am not using any server side or server language. Just HTML and JS

Unclear what you want but Ajax is the thing to use to retrieve data from another resource in the background. — Alex K.
– Alex K., Commented Jun 20, 2018 at 15:19
Where it is stored this variable? Change where? On some database on server? Something like for example likes update in real-time? — Grzegorz J
– Grzegorz J, Commented Jun 20, 2018 at 15:19
"to get the value from other page to another, I need to refresh the page" no you don't, you can use AJAX. Although if you're just loading it from another static HTML page, you'll have to parse that page and look for the value — ADyson
– ADyson, Commented Jun 20, 2018 at 15:23
You can create a channel like backbone Notifications and use listener on the channel to poll for the value. — yeshashah
– yeshashah, Commented Jun 20, 2018 at 15:27
If you familiar with react or vuejs you can do this easily with either of them, harder to do with vanilla javascript — Ossaija Thankgod
– Ossaija Thankgod, Commented Jun 20, 2018 at 15:32

Kevin Caravaggio · Accepted Answer · 2018-06-20 15:42:44Z

4

I believe the function you are looking for is setInterval(). This function will call a child function every time a certain period of time passes. In a limited use case, you can register a variable in a script and also register an interval timer to update it periodically. Depending on your use case, you may need to also write some JS to bind the new value of the number to the DOM.

Here is an example of using the intervals. In this example, clicking the button once begins the timer. After that, the interval (1000ms) will fire an event automatically to update the x variable and bind the new value to the DOM.

<!DOCTYPE html>
<html>
<body>
<button id="eventBtn" onclick="myFunction()">X = 0</button>
<script>
var x = 0;
function myFunction() {
    setInterval(function(){ 
        x++;
        var btn = document.getElementById("eventBtn");
        btn.innerHTML = 'X = ' + x;
    }, 1000);
}
</script>
</body>
</html>

Interactive JS Fiddle for example

W3Schools - "Window setInterval() Method"

answered Jun 20, 2018 at 15:42

Kevin Caravaggio

7405 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Miguel Over a year ago

Thank you so much. Worked like a charm.

ADyson Over a year ago

Unless I misunderstood, the question asked about getting a value from another page, but this only gets and sets something from the same page

Kevin Caravaggio Over a year ago

People misunderstood the question and started commenting about AJAX, which was a rabbit-hole. If you read it closer, the question mentions being able to update the value with a page refresh, so getting network data was not the core issue. The issue is executing JS in the background continuously.

Collectives™ on Stack Overflow

Refresh javascript variables without refreshing the page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related