Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to pass a parameter using the dom in a.onclick = function() {...} event?

Reply
Thread Tools

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

 
 
SM
Guest
Posts: n/a
 
      05-25-2007
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[i].path;
description = thumbnail[i].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
}

 
Reply With Quote
 
 
 
 
TheBagbournes
Guest
Posts: n/a
 
      05-27-2007
SM wrote:
> 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[i].path;
> description = thumbnail[i].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.
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      05-27-2007
On May 26, 8:57 am, SM <(E-Mail Removed)> wrote:
> 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[i].path;
> description = thumbnail[i].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/co...9e4b4d3d8d3144
>



--
Rob

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
How to pass a parameter for a function parameter in a function AzamSharp Javascript 2 07-05-2008 12:24 AM
Using declaration inside first template parameter as default valuefor second template parameter. Stuart Redmann C++ 5 12-14-2007 08:42 AM
Command line options: using an [option: parameter] without a parameter passed to it soren625 Perl Misc 10 12-28-2005 09:26 PM
is it possible to get hidden parameter values using window.opener.document.form.parameter.value. Abdul Mohsin Javascript 1 09-06-2005 03:38 PM



Advertisments