UI: assignment of links using onclick event handler

[Dark Magician]

Comrades:

Am trying to build a UI widget. I'm sure part of the problem is proper
variable scope or object reference, and part of the problem may be the
way I'm calling the function, but, here goes.

Part I. Consider:

A B C D M
E F G H N O
I J K L

where A...L are linked thumbnails, the links go to "#",
M is a large image, and
N and O are left and right buttons.
All objects are absolutely positioned.

For now we'll consider O's case only. When O is clicked, this will
trigger a function that retrieves values from an array of thumbnail
objects that has a small and big image reference, and assigns a new src
to thumbnails A...L via getElementById('...').src.

for (var i = 0; i < 12; i++) {
var newthumb = "thumb" + i; // to retrieve the thumbnail properties in
the array
var thumbref = "'img" + i + "'"; // this is the ref for A...L
var newbigimg = newthumb.bigimg; // tells the thumbnail what to set M
to when clicked
document.getElementById(thumbref).src = newthumb.smallimg; // sets
A...L's new src
...
}

Where I'm stuck is, how to tell the thumbnail's link to change M
through getElementById('...').onclick. Currently I'm passing it an
anonymous function call, like this:

document.getElementById(thumbref).onclick = function () {
document.getElementById('bigimage').src = newbigimg; }

But, because of the for loop, when I click a thumb, they all only
change M's src to the very last image in the array, 11.jpg. I think it
is because when the loop ends, all the links call the same anon
function, and the last ref for newthumb.bigimg is 11.

I speculate, therefore, that to solve this problem, I need to be able
to assign a separate function to each link, whereby A's link's onclick
property calls a function that turns M's src to "1.jpg", B's link's
onclick property turns M's src to "2.jpg", etc. Should I store the
function in the array as a literal value? Hmm.

Part II. My desperate plea for help:
If anyone can tell me how I can set the link's onclick property for
each thumbnail with a separate argument, I'd greatly appreciate it.

Many thanks in advance. (Unconstructive code crit and other forms of
hating notwithstanding. ;-))
Cheers,
DM

 

[Lee]

Dark Magician said:

Comrades:

Am trying to build a UI widget. I'm sure part of the problem is proper
variable scope or object reference, and part of the problem may be the
way I'm calling the function, but, here goes.

Part I. Consider:

A B C D M
E F G H N O
I J K L

where A...L are linked thumbnails, the links go to "#",
M is a large image, and
N and O are left and right buttons.
All objects are absolutely positioned.

For now we'll consider O's case only. When O is clicked, this will
trigger a function that retrieves values from an array of thumbnail
objects that has a small and big image reference, and assigns a new src
to thumbnails A...L via getElementById('...').src.

for (var i = 0; i < 12; i++) {
var newthumb = "thumb" + i; // to retrieve the thumbnail properties in
the array
var thumbref = "'img" + i + "'"; // this is the ref for A...L
var newbigimg = newthumb.bigimg; // tells the thumbnail what to set M
to when clicked
document.getElementById(thumbref).src = newthumb.smallimg; // sets
A...L's new src
...
}

Where I'm stuck is, how to tell the thumbnail's link to change M
through getElementById('...').onclick.

They should each have exactly the same onclick event handler.
Design that event handler so that it does the appropriate
thing depending on which image was clicked and the current
value of some attribute of that image.