469,347 Members | 3,452 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,347 developers. It's quick & easy.

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 1546
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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Dave Benjamin | last post: by
27 posts views Thread by Ted Lilley | last post: by
9 posts views Thread by Mikito Harakiri | last post: by
7 posts views Thread by Csaba Gabor | last post: by
9 posts views Thread by User1014 | last post: by
reply views Thread by Gerard Brunick | last post: by
11 posts views Thread by Huayang Xia | last post: by
4 posts views Thread by LAN MIND | last post: by
4 posts views Thread by JavascriptProgrammer | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.