Closure

[disappearedng]

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_handler s = function(nodes) {
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e){
alert(i);
}
}
};

//Better example
var add_the_handler s = 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?

[Gregor Kofler]

Re: Closure

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_handler s = function(nodes) {
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e){
alert(i);
}
}
};
>
//Better example
var add_the_handler s = 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

[dhtml]

Re: Closure

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_handler s = function(nodes) {
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e){
alert(i);
}
}
};
>
//Better example
var add_the_handler s = 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_handler s:
<script type="text/javascript">
var template = document.getEle mentById('templ ate'),
spans = template.getEle mentsByTagName( 'span');

add_the_handler s(spans);
</script>

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

--
comp.lang.javas cript FAQ <URL: http://jibbering.com/faq/ >

[Jason S]

Re: Closure

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_handler s = 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_handler s = 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);
}
};