[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Closure in JavaScript

Posted on 2012-03-12
5
Medium Priority
?
147 Views
Last Modified: 2012-03-20
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
Comment
Question by:milani_lucie
  • 2
  • 2
5 Comments
 
LVL 18

Expert Comment

by:nap0leon
ID: 37712088
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
 

Author Comment

by:milani_lucie
ID: 37712123
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 37712257
0
 

Author Comment

by:milani_lucie
ID: 37715741
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
 
LVL 18

Accepted Solution

by:
nap0leon earned 2000 total points
ID: 37715792
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question