I apologize if my question is a bit unclear, as I am currently teaching myself how to use javascript. I am working on generating image thumbnails dynamically and would like the ability for users to enlarge the image when they click on the thumbnails. The piece of code I have written to create the image tag and assign the onclick function looks something like this...
var imageTag = "<img onclick=\"enlargeImage()\" class=\"thumb\" src=\"" + photoURL + "\" />";
document.getElementById("image-thumbnail").innerHTML = imageTag;
Using the above code, I can display the thumbnail and call the enlargeImage() function when it's clicked. My main query is, how do I access the specific image object that was clicked within the enlargeImage() function? Initially, I tried accessing the this object inside the function, assuming it would refer to the clicked image, but unfortunately, this represented the entire page rather than the image itself. I aim to be able to utilize and modify attributes like the src attribute and style properties of the image thumbnail. Additionally, please note that as I progress, there will be multiple images involved, necessitating these dynamic functionalities.
Thank you so much in advance for any assistance provided!