Cannot retrieve array values in for loop

Question

I have got a quick noob question: I am trying to retrieve the values of an array and printing them to an html element with jQuery "on Click". However, I cannot seem to retrieve the array elements. For each clicked item it should get the array element at index i , so #item-0 should get the value of "red", etc.

The console logs undefined.

var descriptions = ["red", "blue", "green", "purple", "white", "black"];

for (var i = 0; i < descriptions.length; i++) {
  $("#item-" + i).on("click", function() {
    var currentDescr = descriptions[i];
    console.log(currentDescr);

    $("#footer-text").html(currentDescr);
  });
};

.as-console-wrapper{top:0;max-height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Any help would be appreciated.

What do you mean "the console logs undefined"? I can't see any console.log statements in your code. — James Monger
– James Monger, Commented Jan 12, 2017 at 11:55

Jonathan Gray · Accepted Answer · 2017-01-12 11:59:11Z

2

The loop is finishing before the events fire, leading to an incorrect value of i... Try this:

var descriptions = ["red","blue","green","purple","white","black"];


for (var i = 0; i < descriptions.length; i++) {

    (function(i){
        $("#item-"+i).on("click", function(){

           var currentDescr = descriptions[i];
           console.log(currentDescr);
           $("#footer-text").html(currentDescr);

       });
    }(i));
};

answered Jan 12, 2017 at 11:59

Jonathan Gray

2,60919 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ganesh Yadav Over a year ago

I made a demo and facing same issue but your solution helped. jsfiddle.net/ohzcvqvk

Pranav C Balan · Accepted Answer · 2017-01-12 12:02:13Z

It's happening because when you are clicking the button the value of i would be descriptions.length (at that point loop is breaking) since there is no value at that index it would be undefined.

You can solve this by using let instead of var which provide block level scope.

var descriptions = ["red","blue","green","purple","white","black"];


for (let i = 0; i < descriptions.length; i++) {
  $("#item-"+i).on("click", function(){
    var currentDescr = descriptions[i];
    console.log(currentDescr);
    $("#footer-text").html(currentDescr);
  });
};

or use a closure function and pass i as an argument.

var descriptions = ["red","blue","green","purple","white","black"];


for (let i = 0; i < descriptions.length; i++) {
  (function(index){
    $("#item-" + index).on("click", function(){
      var currentDescr = descriptions[index];
      console.log(currentDescr);
      $("#footer-text").html(currentDescr);
    });
  })(i);
};

Collectives™ on Stack Overflow

Cannot retrieve array values in for loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related