[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 149
  • Last Modified:

Closure in JavaScript

Hi,

I have written the code in JavaScript two ways (WAY-1.html, WAY-2.html). Find the attachments. The second way (WAY-2.html) works fine as expected. Can you please do let me know why ? BTW: What is this "Closure" thing ? Also please explain a little bit !

Thanks
WAY-1.html
WAY-2.html
0
milani_lucie
Asked:
milani_lucie
  • 2
  • 2
1 Solution
 
nap0leonCommented:
In "Way1", because your function looped through everything when the page loaded, the value of "i" is 5, so you alert('5') every time you click.

In "Way2", you created a function call on each item.  This function call passes the value that "i" was at the time of the function creation.  In this way, your page is able to alert('1'), alert('2'), etc.
0
 
milani_lucieAuthor Commented:
I am still NOT clear ... Can you please explain me in simple terms ?

WAY - 1

elements(i).onclick = function() { alert(i); };

means

if i = 0 then alert(0)
if i = 1 then alert(1)
if i = 2 then alert(2)
if i = 3 then alert(3)
if i = 4 then alert(4)

Am i correct ?

Thanks
0
 
HonorGodCommented:
0
 
milani_lucieAuthor Commented:
Sorry ... I cannot go through the entire story with deep URLs. Please provide me point-to-point explanation so that i can understand it better !! Even i have provided you the code also.

Thanks
0
 
nap0leonCommented:
In Way1, the counter loops all the way through so the value of i is 5. When you click, it passes the current value of i, which is 5, into the function that runs the alert, so you end up alerting '5' every time.

In Way2, you created a function or each specific click. Because each of these are unique functions, they pass the value of 1, 2, 3, 4, or 5 into the function that alerts the value.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now