Generating random image url in javascript

Question

I am generating random numbers and appending with the previous variable and trying to get the value of images. but also the random number only generated. How can I do this ?

Here's my code

var img1 = 'http://i.imgur.com/8olCb1Qb.jpg';
var img2= 'http://i.imgur.com/usJWgL7b.jpg';
var img3 = 'http://i.imgur.com/kxsLXb8b.jpg';
var img4 = 'http://i.imgur.com/XQbcjvUb.jpg';
var img5 = 'http://i.imgur.com/j3CVSSMb.jpg';
var img6 = 'http://i.imgur.com/BQNvBVib.jpg';
var img7 = 'http://i.imgur.com/DZq0ORlb.jpg';
var img8 = 'http://i.imgur.com/t73Tvlqb.jpg';
var img9 = 'http://i.imgur.com/Y8iFltdb.jpg';
var img10 = 'http://i.imgur.com/u3sBUMjb.jpg';
var no = Math.floor(Math.random() * 6) + 1
var img = 'img'+no;
console.log(img)

I prefer only javascript.

Why not use an array? Just get the random index from it and you're done. For the record you can do console.log(window[img]) but I don't think that's the way to go. — VLAZ
– VLAZ, Commented Dec 2, 2016 at 12:08

Victor Bychek · Accepted Answer · 2016-12-02 12:19:12Z

4

I think you want to select random images

var images = [
    'http://i.imgur.com/8olCb1Qb.jpg',
    'http://i.imgur.com/usJWgL7b.jpg',
    'http://i.imgur.com/kxsLXb8b.jpg',
    'http://i.imgur.com/XQbcjvUb.jpg',
    'http://i.imgur.com/j3CVSSMb.jpg',
    'http://i.imgur.com/BQNvBVib.jpg',
    'http://i.imgur.com/DZq0ORlb.jpg',
    'http://i.imgur.com/t73Tvlqb.jpg',
    'http://i.imgur.com/Y8iFltdb.jpg',
    'http://i.imgur.com/u3sBUMjb.jpg'
];
var random = images[Math.floor(Math.random() * images.length)];

answered Dec 2, 2016 at 12:19

Victor Bychek

561 silver badge3 bronze badges

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

Comments

GottZ · Accepted Answer · 2016-12-02 12:20:45Z

1

well. arrays are fun. you should use them.

var images = ["8olCb1Qb", "usJWgL7b", "kxsLXb8b", "XQbcjvUb", "j3CVSSMb", "BQNvBVib", "DZq0ORlb", "t73Tvlqb", "Y8iFltdb", "u3sBUMjb"];
var randomPick = images[Math.random() * images.length | 0];
var url = "http://i.imgur.com/" + randomPick + ".jpg";
document.body.appendChild(new Image()).src = url;

answered Dec 2, 2016 at 12:20

GottZ

4,9771 gold badge39 silver badges48 bronze badges

Comments

Ruan Mendes · Accepted Answer · 2016-12-02 19:20:53Z

1

As suggested by others, dynamic variable names are kind of ugly. You should use an array.

var imgs = ['a', 'b', 'c'];
var randomImg = imgs[Math.floor(Math.random() * imgs.length);

If you really want to use dynamic names, you should attach them to an object, not just free standing variables.

var imgs = {img1: 'a', img2: 'b', img3: 'c'};
var no = Math.floor(Math.random() * 3) + 1:
var img = imgs['img' + no];

edited Dec 2, 2016 at 19:20

answered Dec 2, 2016 at 12:24

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Comments

Farzin Kanzi · Accepted Answer · 2016-12-02 12:15:21Z

0

Put your images in a div named div divImages.

var img=$('#divImages').children().eq(no);

And if you don't want using jquery the javascript is:

var img = document.getElementById('#divImages').children[no];

answered Dec 2, 2016 at 12:15

Farzin Kanzi

3,4532 gold badges23 silver badges25 bronze badges

Comments

pheroMona13 · Accepted Answer · 2016-12-02 12:22:38Z

0

if you don't want to put your images in an array, you can call them like this:

var img1 = 'http://i.imgur.com/8olCb1Qb.jpg';
var img2= 'http://i.imgur.com/usJWgL7b.jpg';
var img3 = 'http://i.imgur.com/kxsLXb8b.jpg';
var img4 = 'http://i.imgur.com/XQbcjvUb.jpg';
var img5 = 'http://i.imgur.com/j3CVSSMb.jpg';
var img6 = 'http://i.imgur.com/BQNvBVib.jpg';
var img7 = 'http://i.imgur.com/DZq0ORlb.jpg';
var img8 = 'http://i.imgur.com/t73Tvlqb.jpg';
var img9 = 'http://i.imgur.com/Y8iFltdb.jpg';
var img10 = 'http://i.imgur.com/u3sBUMjb.jpg';
var no = Math.floor(Math.random() * 6) + 1
var img = 'img'+no;
console.log(window[img])
// or 
console.log(this[img])

answered Dec 2, 2016 at 12:22

pheroMona13

4828 silver badges18 bronze badges

Collectives™ on Stack Overflow

Generating random image url in javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related