CODEWITHSUNDEEP
javascriptjqueryarrays
Mamen
Mamen

Reputation: 1436

undefined array in loop function javascript

i have following script like :

/* jshint loopfunc:true */
var url = [
    "http://protiumdesign.com/wp-content/uploads/2015/04/Material-Design-Background-1024.jpg",
    "http://i.imgur.com/wt4NRqA.jpg",
    "http://i0.wp.com/thezinx.com/wp-content/uploads/md-6.png"
];

$(document).ready(function() {
    changeBack();

    function changeBack() {
        for (var i = 0; i < url.length; i++) {

            $('#elem').fadeTo('slow', 0.3, function() {
                $(this).css('background-image', 'url(' + url[i] + ')');
            }).fadeTo('slow', 1).delay(1000);
        }
        changeBack();
    }
});

the function above for change the background image dynamically but the array is undefined within the function, how to fix that , thank you

this is the fiddle : Here

Upvotes: 0

Views: 191

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Although one of the issues described here is a duplicate of JavaScript closure inside loops – simple practical example, there are other issues like infinite recursive call of changeBack.

I think a better approach will be

/* jshint loopfunc:true */
var url = ["http://protiumdesign.com/wp-content/uploads/2015/04/Material-Design-Background-1024.jpg", "http://i.imgur.com/wt4NRqA.jpg", "http://i0.wp.com/thezinx.com/wp-content/uploads/md-6.png"];

$(document).ready(function() {
  var i = 0;

  function changeBack() {
    $('#elem').fadeTo('slow', 0.3, function() {
      $(this).css('background-image', 'url(' + url[i++] + ')');
      i = i < url.length ? i : 0
    }).fadeTo('slow', 1).delay(1000).promise().done(changeBack);
  }
  changeBack();
});
#elem {
  width: 500px;
  height: 300px;
  background-size: 100%;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='elem'></div>

Upvotes: 4

Related Questions