473,218 Members | 1,482 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,218 software developers and data experts.

Closure

Hi everyone
I am currently reading a book, and I don't seem to under the author,
(Crockfold) when he says this:

//Bad examples
var add_the_handlers = function(nodes){
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e){
alert(i);
}
}
};

//Better example
var add_the_handlers = function(nodes){
var i;
for (i = 0; i < nodes.length; i++) {
nodes[i].onclick = function(i){
return function(e){
alert(i);
};
}(i);
}
};
Both of these functions are suppose to assign event handler functions
to an array of nodes.

How do I test both of these?
Nov 13 '08 #1
3 1662
disappearedng meinte:
Hi everyone
I am currently reading a book, and I don't seem to under the author,
(Crockfold) when he says this:

//Bad examples
var add_the_handlers = function(nodes){
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e){
alert(i);
}
}
};

//Better example
var add_the_handlers = function(nodes){
var i;
for (i = 0; i < nodes.length; i++) {
nodes[i].onclick = function(i){
return function(e){
alert(i);
};
}(i);
}
};
Both of these functions are suppose to assign event handler functions
to an array of nodes.

How do I test both of these?
No need to test them - Crockford explains what's going on, and it is
(relatively) easy to understand. In the first case all nodes will alert
the same value. In the latter one the proper one.

Gregor
Nov 13 '08 #2
disappearedng wrote:
Hi everyone
I am currently reading a book, and I don't seem to under the author,
(Crockfold) when he says this:

//Bad examples
var add_the_handlers = function(nodes){
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e){
alert(i);
}
}
};

//Better example
var add_the_handlers = function(nodes){
var i;
for (i = 0; i < nodes.length; i++) {
nodes[i].onclick = function(i){
return function(e){
alert(i);
};
}(i);
}
};

Even better would be to use tabs and not spaces when posting (please).
Both of these functions are suppose to assign event handler functions
to an array of nodes.

How do I test both of these?
1. Create a document with template element containing elements with the
same tag name.

<div id="template">
<span>no 1</span>
<span>no 2</span>
<span>no 3</span>

</div>

2. call add_the_handlers:
<script type="text/javascript">
var template = document.getElementById('template'),
spans = template.getElementsByTagName('span');

add_the_handlers(spans);
</script>

3. click on each span, checking to make sure that the alert displays the
expected number.

--
comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
Nov 14 '08 #3
On Nov 12, 10:18*pm, disappearedng <disappeare...@gmail.comwrote:
Hi everyone
I am currently reading a book, and I don't seem to under the author,
in the first case, the "i" variable that each closure accesses, is the
same as the "i" used in the for loop which ends up equalling the # of
nodes.

in the second case, the "i" variable that each closure accesses, is a
private copy of the value of "i" at each pass of the for loop. The for-
loop's "i" is passed as an argument to the middle-level function, and
it's a copy of "i" that gets used in the closure. it would have been
clearer to write (for pedagogical purposes):

//Better example
var add_the_handlers = function(nodes){
var i;
for (i = 0; i < nodes.length; i
++) {
nodes[i].onclick =
function(icopy){
return function
(e){
alert
(icopy);
};
}(i);
}
};

// or even this:
var add_the_handlers = function(nodes){
var makeClosure = function(icopy)
{
return function(e) { alert(icopy); };
}
var i;
for (i = 0; i < nodes.length; i++) {
nodes[i].onclick = makeClosure(i);
}
};
Nov 17 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Dave Benjamin | last post by:
Here are some more ideas for how to implement a statement-friendly code block syntax in Python. Hopefully more "Pythonic" (that is, of or pertaining to those features noticably reminiscent of...
27
by: Ted Lilley | last post by:
What I want to do is pre-load functions with arguments by iterating through a list like so: >>>class myclass: .... pass >>>def func(self, arg): .... print arg >>>mylist = >>>for item...
1
by: Victor Ng | last post by:
Is there a way to preserve the argspec of a function after wrapping it in a closure? I'm looking for a general way to say "wrap function F in a closure", such that inspect.getargspec on the...
9
by: Mikito Harakiri | last post by:
Transitive closure (TC) of a graph is with TransClosedEdges (tail, head) as ( select tail, head from Edges union all select e.tail, ee.head from Edges e, TransClosedEdges ee where e.head =...
7
by: Csaba Gabor | last post by:
I feel like it's the twilight zone here as several seemingly trivial questions are bugging me. The first of the following three lines is a syntax error, while the last one is the only one that...
9
by: User1014 | last post by:
I'm a javascript noob and have a question concerning some code I've come across that I'm trying to understand. Here is a snippet of the relevant section: (snip) var closure = this; var xhr =...
0
by: Gerard Brunick | last post by:
Consider: ### Function closure example def outer(s): .... def inner(): .... print s .... return inner .... 5
11
by: Huayang Xia | last post by:
What will the following piece of code print? (10 or 15) def testClosure(maxIndex) : def closureTest(): return maxIndex maxIndex += 5 return closureTest()
4
by: LAN MIND | last post by:
?
4
by: JavascriptProgrammer | last post by:
In the following code: ----------------------- function get() { return function() { alert(x); } }; function foo(s) { var x = s; this.getX = get();
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.