JS Create dynamic variable inside for loop

Question

for some reason the dynamic variable inside this for loop doesn't update in the function, but updates in the console.

Does sb has an idea why this happens? Thanks a lot for helping :)!

$(".numberOfImages").on("mousemove change", function(){
 numberOfImages = this.value;
 changeImageNumber();
});
function changeImageNumber(){
 for(var i = 0; i < numberOfImages; i++){
 console.log(numberOfImages);
 images[i] = "img/image" + i + ".jpg";
 }
}

• Zohaib Ijaz: What do you mean by dynamic variable inside this for loop doesn't update in the function? elaborate
• Art2B: Can you show more code ? Where do you defined the vars numberOfImages and images ?
• user8143015: I mean the variable numberOfImages should be dynamic. Is the code above enough or should I share the html code as well?

Answer 1

It worked as expected, nothing wrong however instead of global variable, simply pass value to function.

var numberOfImages = 0;
var images = [];
$("#numberOfImages").on("change", function(){
 numberOfImages = this.value;
 changeImageNumber();
 console.log(images)
});
function changeImageNumber(){
 images = [];
 console.log(numberOfImages);
 for(var i = 0; i < numberOfImages; i++){
 images[i] = "img/image" + i + ".jpg";
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="numberOfImages">
<option value=1 >1</option>
<option value=2 >2</option>
<option value=3 >3</option>
<option value=4 >4</option>
</select>

Answer 2

Yes, it kind of works. But the value of numberOfImages inside the for loop still stays the default value = 0. Even if you change the options..At least in my case.. do you know why? my entire code looks like this:

var sliderWidthValue = 1;
var sliderHeightValue = 1;
var distanceLayerWidthValue = 45;
var distanceLayerHeightValue = 45;
var numberOfImages = 10;
var images = [];
$(window).load(function(){
 $("#loadingMessage").hide();
 $("main").show();
});
$(document).ready(function() {
changeImageNumber();
// Change number of images (not working yet)
$(".numberOfImages").on("mousemove change", function(){
 numberOfImages = this.value;
 changeImageNumber();
});
function changeImageNumber(){
 images = [];
 for(var i = 0; i < numberOfImages; i++){
 console.log(numberOfImages);
 images[i] = "img/image" + i + ".jpg";
 }
}
$.each(images, function(i, val) {
 $("<img />")
 .attr("src", val)
 .appendTo("#images")
 .addClass("image"+i);
 $(".image"+i)
 .wrap( "<div class=container"+i+"></div>" );
 containerChange();
 //change container size
 $(".sliderWidth").on("mousemove change", function(){
 sliderWidthValue = this.value;
 containerChange();
 });
 $(".sliderHeight").on("mousemove change", function(){
 sliderHeightValue = this.value;
 containerChange();
 });
 //Change distance between layers
 $(".distanceLayerWidth").on("mousemove change", function(){
 distanceLayerWidthValue = this.value;
 containerChange();
 });
 $(".distanceLayerHeight").on("mousemove change", function(){
 distanceLayerHeightValue = this.value;
 containerChange();
 });
 function containerChange(){
 $(".container"+i)
 .css('width', sliderWidthValue*10+(i*distanceLayerWidthValue) + "px")
 .css('height', sliderHeightValue*10+(i*distanceLayerHeightValue) + "px")
 .css('z-index', i*-1);
 }
});
});