0

I have following code:

function makeImgsDynamic()
{
    // Find all elements of class 'dynamic_image'
    // Set the onclick event for all these images
    var arrayOfImages = document.getElementsByClassName("dynamic_image");
    for (i = 0; i < arrayOfImages.length; i++) {
        // get the path the image is pointing towards
        var path = arrayOfImages[i].getAttribute("src");
        // when clicked, display the overlay, with an image located at the same path
        arrayOfImages[i].addEventListener("click", function(){temp(path);}, false);
    }
};

and;

function temp(path)
{
    alert(path);
};

The aim of this code is to help build a typical 'enlarge the picture when clicked' feature. However, when I implemented this, I noticed that it kept enlarging the same image, rather than the one that was actually clicked. This piece of code is the simplest version that still exhibits this problem. The alert message always shows me the same URL, regardless of the actual image being clicked.

How do I change this behaviour? Please note that I prefer not to use JQuery.

Kind regards, Joris

0 Answers0