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

Discussion in 'Javascript' started by SM, May 25, 2007.

  1. SM

    SM Guest

    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
    }
     
    SM, May 25, 2007
    #1
    1. Advertising

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

    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.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.
     
    TheBagbournes, May 27, 2007
    #2
    1. Advertising

  3. SM

    RobG Guest

    On May 26, 8:57 am, 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?


    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
    >



    --
    Rob
     
    RobG, May 27, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. junk.rail
    Replies:
    1
    Views:
    673
    junk.rail
    Jun 30, 2010
  2. Bob
    Replies:
    5
    Views:
    262
  3. SM
    Replies:
    4
    Views:
    90
  4. donpro
    Replies:
    0
    Views:
    101
    donpro
    Oct 29, 2007
  5. AzamSharp
    Replies:
    2
    Views:
    181
Loading...

Share This Page