How to add images in divs randomly using JavaScript?

check this fiddle FIDDLE

var limit = 5,
    amount = 5,
    lower_bound = 1,
    upper_bound = 10,
    unique_random_numbers = [];

if (amount > limit) limit = amount; //Infinite loop if you want more unique
                                    //Natural numbers than existemt in a
                                    // given range
while (unique_random_numbers.length < limit) {
    var random_number = Math.round(Math.random()*(upper_bound - lower_bound) + lower_bound);
    if (unique_random_numbers.indexOf(random_number) == -1) { 
        // Yay! new random number
        unique_random_numbers.push( random_number );
    }
}

var urllist=["http://upload.wikimedia.org/wikipedia/commons/c/cf/Eenbruinigherfstblad.jpg","http://upload.wikimedia.org/wikipedia/en/5/57/Canadian_maple_leaf_2.jpg","http://upload.wikimedia.org/wikipedia/commons/9/9d/Pear_Leaf.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"];
//alert(unique_random_numbers);

for(var i = 0; i < unique_random_numbers.length; i++) {
    var a="<img width="45px" height="45px" id='"+(i+1)+"' src=""+urllist[unique_random_numbers[i]]+"" alt="image"+(unique_random_numbers[i])+""/>";

  //  alert(a);

    $("#pr-"+unique_random_numbers[i]).html("");
    $("#pr-"+unique_random_numbers[i]).append(""+a);

}

Leave a Comment