How to get img src to change by getting id from array?

Question

I am facing trouble in getting the attributes in itemIMG to change when the button is clicked.

This is the code in my js, it is in a loop:

$("#btnitemIMGcolour").click(function(){
    $("#itemIMG").attr("src", serverURL() + "/images/" + arr[i].itemColour);
}

This is the code for the button to function window.location:

$('#btnitemIMGcolour' + arr[i].colourID).bind("click", {id1: arr[i].itemID, id2: arr[i].colourID}, function (event) { //This line of code create a button and has an event listener
     var data = event.data;
     displayothercolour(data.id1, data.id2); // Call shoecat function
});

function displayothercolour(itemID,colourID) {
   window.location = "itemdetail.html?itemID=" + itemID + "&colourID=" + colourID;
   localStorage.setItem("colourID", colourID);
}

The codes works, however the image currently only show the latest image inserted in the database.

The full loop is shown below:

function _getitemcolour(arr) {
    var i;
    for (i = 0; i < arr.length; i++) {
        $("#btnitemIMGcolour").click(function () {
            $("#itemIMG").attr("src", serverURL() + "/images/" + arr[i].itemColour);
        }
        var t;
        t = "<a href='#' id='btnitemIMGcolour" + arr[i].colourID + "'> <img src='" + serverURL() + "/images/" + arr[i].itemColour + "' class='itemIMGcolour'>";
        $("#itemIMGcolour").append(t);
        $('#btnitemIMGcolour' + arr[i].colourID).bind("click", { id1: arr[i].itemID, id2: arr[i].colourID }, function (event) { //This line of code create a button and has an event listener
            var data = event.data;
            displayothercolour(data.id1, data.id2); // Call shoecat function
        });
    }
}

function displayothercolour(itemID, colourID) {
    window.location = "itemdetail.html?itemID=" + itemID + "&colourID=" + colourID;
    localStorage.setItem("colourID", colourID);
}

Probably a problem with a closure. Could you please post the full loop? — Szab, Nov 29 '18 at 09:16
Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Sebastian Simon, Nov 29 '18 at 09:23

Szab · Accepted Answer · 2018-11-29T21:53:46.900

Welcome to Stack Overflow! :)

So, first of all you've a got a little syntax error 6, i.e. your code is missing enclosing ')' (parenthesis). So that whole part should look like this:

$("#btnitemIMGcolour").click(function () {
     $("#itemIMG").attr("src", serverURL() + "/images/" + arr[i].itemColour);
})

Second of all. There's no point in splitting the variable declaration and initialisation - you can do both at once. E.g. instead of this:

var i;
for (i = 0; i < arr.length; i++) {
    /* Rest of the code */
}

you can simply do this:

for (var i = 0; i < arr.length; i++) {
    /* Rest of the code */
}

And the same can be done with variable 't'. And finally to the point. Your img.src always contains the same value because of something called a closure. Without getting into details: when you create a function inside of a function, the variables from the parent function used in a child function are not copied to the child function, but they are referenced as if there were declared inside that function. Let's consider the example below:

var value = 0;
var counter1 = function() {
    value = value + 1;
    return value;
};
var counter2 = function() {
    value = value + 1;
    return value;
};
counter1(); // returns 1
counter2(); // returns 2
counter1(); // returns 3
counter2(); // returns 4

Whenever a counter1 or a counter2 function is called, they update and return a value of the same variable - that's because that variable was referenced in a function instead of its value being simply copied inside those functions. The same happens in your code - the click handler references the i variable, so when its finally called as a result of a click event, it uses the "current" (or actually the last) value of i which is equal to the index of the last element in an array.

To overcome that problem, you can simply create another function which accepts a value of arr[i] as an argument and performs all the operations inside:

function bindEvents(item) {
    $("#btnitemIMGcolour").click(function () {
        $("#itemIMG").attr("src", serverURL() + "/images/" + item.itemColour);
    });
    var t = "<a href='#' id='btnitemIMGcolour" + item.colourID + "'> <img src='" + serverURL() + "/images/" + item.itemColour + "' class='itemIMGcolour'>";
    $("#itemIMGcolour").append(t);
    $('#btnitemIMGcolour' + item.colourID).bind("click", { id1: item.itemID, id2: item.colourID }, function (event) { //This line of code create a button and has an event listener
        var data = event.data;
        displayothercolour(data.id1, data.id2); // Call shoecat function
    });
}

function _getitemcolour(arr) {
    for (var i = 0; i < arr.length; i++) {
        bindEvents(arr[i]);
    }
}

More about closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

More about closures and loops: JavaScript closure inside loops – simple practical example

How to get img src to change by getting id from array?

1 Answers1