How to pass a parameter using the dom in a.onclick = function() {...} event?

[SM]

Hello,
I have two functions: show_thumbnail() and show_photo(). See code
below.

In show_thumbnail() i create a <ul> list using Javascript and the DOM.
In the tag <a> i create a onclick function and im passing two
parameters to the show_photo() function, the path of the image and the
description

In show_photo(), the parameters are always the last image and
description of the array.
How come?

Thanks
Marco




function show_thumbnail(thumbnail)
{
...
var path, description;
var li, a, img;

var ul = document.createElement('ul');
ul.className = 'photoThumbnail';

for(var i=0; i<thumbnail.length; i++)
{
path = thumbnail.path;
description = thumbnail.description;

li = document.createElement('li');

a = document.createElement('a');
a.onclick = function() { show_photo(path, description); } ??????

img = document.createElement('img');
img.setAttribute('src', path);

a.appendChild(img);
li.appendChild(a);
ul.appendChild(li);
}
}

function show_photo(path, description)
{
alert(path); ???always showa the last path of the array
}

 

[TheBagbournes]

Hello,
I have two functions: show_thumbnail() and show_photo(). See code
below.

In show_thumbnail() i create a <ul> list using Javascript and the DOM.
In the tag <a> i create a onclick function and im passing two
parameters to the show_photo() function, the path of the image and the
description

In show_photo(), the parameters are always the last image and
description of the array.
How come?

Thanks
Marco




function show_thumbnail(thumbnail)
{
...
var path, description;
var li, a, img;

var ul = document.createElement('ul');
ul.className = 'photoThumbnail';

for(var i=0; i<thumbnail.length; i++)
{
path = thumbnail.path;
description = thumbnail.description;

li = document.createElement('li');

a = document.createElement('a');
a.onclick = function() { show_photo(path, description); } ??????

img = document.createElement('img');
img.setAttribute('src', path);

a.appendChild(img);
li.appendChild(a);
ul.appendChild(li);
}
}

function show_photo(path, description)
{
alert(path); ???always showa the last path of the array
}

Because there's only one variable called "path", and all the instances of Function which you create and use as onclick handlers use *it*.

Once you've completed the loop, its value will be the last value, so there you go.

 

[RobG]

Hello,
I have two functions: show_thumbnail() and show_photo(). See code
below.

In show_thumbnail() i create a <ul> list using Javascript and the DOM.
In the tag <a> i create a onclick function and im passing two
parameters to the show_photo() function, the path of the image and the
description

In show_photo(), the parameters are always the last image and
description of the array.
How come?

Because the anonymous functions that you assign all have closures back
to the same instaces of path and description.

Thanks
Marco

function show_thumbnail(thumbnail)
{
...
var path, description;
var li, a, img;

var ul = document.createElement('ul');
ul.className = 'photoThumbnail';

for(var i=0; i<thumbnail.length; i++)
{
path = thumbnail.path;
description = thumbnail.description;

li = document.createElement('li');

a = document.createElement('a');
a.onclick = function() { show_photo(path, description); } ??????

There are a few solutions, here's two:

a.onclick = new Function(
'show_photo(' + path + ',' + description + ')'
)

or

a.onclick = (function(p, d) {
return function(){ show_photo(p, d) }
})(path, description);

or you could pass path and description to some other function that
returns the new function. There is a good post here from Mike Winter:

<URL:
http://groups.google.com.au/group/c...re+new+Function&rnum=5&hl=en#189e4b4d3d8d3144