How do I pass the image object into the onclick function being assigned to it?

Question

Sorry if that question is confusing, I'm self-learning javascript. I'm dynamically generating image thumbnails and I want to be able to enlarge the image when the user clicks on the thumbnails. My code to create the image tag and assign the onclick function looks like...

var imageTag = "<img onclick=\"enlargeImage()\" class=\"thumb\" src=\"" + photoURL + "\" />"; 
document.getElementById("image-thumbnail").innerHTML = imageTag;

With that code above, my thumbnail gets displayed and when the user clicks on it, the enlargeImage() function is called. My question is, how can I access the image object that was clicked inside the enlargeImage() function? I tried accessing the this object inside the function hoping it pointed to the image that was clicked, but this referred to the entire page, not the image that was clicked. I'd like to be able access the src attribute, as well as, change the style attributes of the image thumbnail. I should also note that eventually there will be multiple images which is why I need this dynamic behavior.

Thanks so much in advance for your help!

Answer 1

There are a few ways of doing this. The easiest is to simply add aa parameter to the enlargeImage() function and pass it a this reference when you call it.

var imageTag = "<img onclick=\"enlargeImage(this)\" class=\"thumb\" src=\"" + photoURL + "\" />";

Then in the function...

function enlargeImage(img) {
  alert(img.src);
}

Answer 2

I suggest checking out jQuery, since it has a lot of wrappers and handlers for dealing with this stuff, and has a lot of momentum recently.

To be more specific to your question, you can just pass "this" to your function:

var imageTag = "<img onclick=\"enlargeImage(this)\" class=\"thumb\" src=\"" + photoURL + "\" />";

and then in your function you'll have access to the src tag:

function enlargeImage(img){
  alert(img.src);
}

Answer 3

function enlargeImage(img) { var src = img.src; }