Binding Element's Id/src To A Method In A Loop?

[MinusMyThoughts]

I've just started learning OOP in JavaScript, and I'm running into some stumbling blocks with my first class...I'm trying to create a method that dynamically cycles through a list of images inside a div and attaches an onclick handler to display the full-size version of that image.The code I've been working with is:

function ImageGallery() {  this.getImages = function() {	if(document.getElementById("gallery")) {	  var thumbs = document.getElementById("gallery").getElementsByTagName("a");	  for(i=0; i < thumbs.length; i++) {		var src = thumbs[i].getElementsByTagName("img")[0].src;		thumbs[i].onclick = function() { var obj = new ImageGallery(); obj.src = src; obj.displayImages(); return false; }	  }	}  }  this.displayImages = function() {	replace = this.dir+'thumbs/';	var fullSrc = this.src.replace(replace,this.dir);	document.getElementById("gallery").innerHTML += '<div id="gal_disp"><img src="'+fullSrc+'" /></div>';  }  this.src = '';  this.dir = '';}

If I only had one image, this would work fine, but it perpetually resets the src value and results in every image displaying the last image in the series. I had tried creating an array of objects with individual properties, but that seemed like a long-way-around approach.Does anyone have some insight? Thanks in advance!-Jason----------------Now playing: Bowerbirds - Bur Oakvia FoxyTunes

[awitt]

Jason, have you tried using the setAttribute function? If you go to http://www.javascriptkit.com/dhtmltutors/domattribute.shtml, you can see what you're able to do with those methods. I'm still pretty new to Javascript myself, so sorry I can't give ya a more complete answer than that. Post again if my suggestions do not work.

[MinusMyThoughts]

I've read about setAttribute() before, but I'm not sure how it would help me in this case...Do you have any ideas?If I could figure out how to access what thumbnail was clicked (is there a way to do that?) I wouldn't have any issues...-Jason

[jeffman]

Maybe I'm missing something, but this looks way too complicated. Here's a simplified version. I just put the new image in the innerHTML, not a div also. But you can work that out.Lets say your gallery looks like this:

<div id="gallery">	<a href="full/fullsize1.jpg"><img src="thumbs/thumb1.jpg"></a>	<a href="full/fullsize2.jpg"><img src="thumbs/thumb2.jpg"></a>	<a href="full/fullsize3.jpg"><img src="thumbs/thumb3.jpg"></a> </div>

then your code would be like this:

var links = document.getElementById("gallery").getElementsByTagName("a");var len = links.length;for (var i = 0; i < len; i++) {	links[i].onclick = function () {		document.getElementById("gallery").innerHTML += "<img src='" + this.href + "'>";		return false;	}}

Put it in a window.onload handler.

[MinusMyThoughts]

Thanks! I was definitely making it too complicated. -Jason

[justsomeguy]

To go back to the original problem, setAttribute would help because you can save the src for the image as an attribute that you can read in the event handler. The reason this fails:

for(i=0; i < thumbs.length; i++) {  var src = thumbs[i].getElementsByTagName("img")[0].src;  thumbs[i].onclick = function() { var obj = new ImageGallery(); obj.src = src; obj.displayImages(); return false; }}

Is because src is not set to a different value for each onclick function. Whenever the onclick function runs and references the src variable, it is set to whatever it was set at the end of the for loop. You can add something in the for loop to set the src as an attribute, and then read that attribute in the onclick handler.

for(i=0; i < thumbs.length; i++) {  var src = thumbs[i].getElementsByTagName("img")[0].src;  thumbs[i].setAttribute('thumb_src', src);  thumbs[i].onclick = function() { var obj = new ImageGallery(); obj.src = this.getAttribute('thumb_src'); obj.displayImages(); return false; }}

I realize the problem was already solved for this case, but this general problem of scope when defining an event handler in a loop seems to pop up pretty frequently, so it's good to keep in mind what happens when you do something like that.