CODEWITHSUNDEEP
javascript
Robin van Dijk
Robin van Dijk

Reputation: 827

Difference of defining a variable inside and outside a function

New to javascript here.

The Team Treehouse blog has a small tutorial on how to build a timer in javascript. It is basically the following code:

<h1 id="timer">Loading</h1>

var updateMessage = function(){ 
  var date = Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

var timer = setInterval(updateMessage, 500);

This works fine and all. However I want to use date for multiple functions. I tried the following..

var date = Date();
var updateMessage = function(){ 
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

..but now it doesn't work realtime. Whenever I hit F5 it gives back the correct time but it's not updated realtime anymore.

Why is this? I thought that when I declare a variable outside of a function, it would become a global function which could be used anywhere.

Upvotes: 1

Views: 93

Answers (5)

tafa
tafa

Reputation: 7326

The problem here is not where you define the date variable but where and how many times you are calling the Date() function.

Declaring it globally but making the necessary call everytime you need is also a valid solution.

var date; // declaration

var updateMessage = function(){ 
  var message = document.getElementById("timer");
  date = Date(); // call to Date() everytime updateMessage is executed
  message.innerHTML = "The time is " + date;
}

Upvotes: 1

dkasipovic
dkasipovic

Reputation: 6130

Well you are missing setInterval in second example?

Apart from that, you were on the right track, but with a little problem: The way you are doing it now, you are getting the Date() when you load the page, and just use the same date over and over.

Something like this should work for you, as it would give you a global variable while changing the date dinamically:

var date = Date();
var updateMessage = function(){ 
  date = Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

Upvotes: 0

Anonymoose
Anonymoose

Reputation: 2491

var date = Date();

Is only executed once when script loads. The variable date stays the same throughout the lifetime of the webpage. That is why it only changes when you refresh the page.

Upvotes: 2

Govind Singh
Govind Singh

Reputation: 15490

var date = Date();
var updateMessage = function(){ 
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

in above case var date is a variable whose value is assigned when script loaded.

and in another case var date is assign all time when the updateMessage is called

var updateMessage = function(){ 
  var date = Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

Upvotes: 2

epascarello
epascarello

Reputation: 207557

Because Date() is the time you call it, it does not keep updating!

If you want to share it, update it inside of the function. 

var date;
var updateMessage = function(){ 
   date = new Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

Upvotes: 5

Related Questions