How to use Math.random() to distribute three pictures into three img elements?

Question

I have 3 images. 1.jpg, 2.jpg, 3.jpg. I want to distribute them into three img elements randomly (on window refresh, the three images' positions will change).
How do I use Math.random() here? Thanks.

<img src='' id='img1' />
<img src='' id='img2' />
<img src='' id='img3' />

Thanks, please forgive me, now I have done that. – yuli chika Nov 12 '10 at 20:05 — yuli chika, Nov 12 '10 at 20:05

score 3 · Answer 1 · edited May 23 '17 at 12:04

3

You can shuffle an array you create:

var arr = ["1.jpg", "2.jpg", "3.jpg"];
arr.sort(function() {return 0.5 - Math.random()});

Some people prefer other ways of shuffling, but a shuffling method would work to ensure you get all of the elements only once in your resulting array.

edited May 23 '17 at 12:04

Community

1
1

answered Nov 12 '10 at 20:01

palswim

11,856
6
53
77

Oh,thanks, I'm now reading the article of shuffling. shuffling is more difficult to know. – yuli chika Nov 12 '10 at 20:24

score 2 · Accepted Answer · answered Nov 12 '10 at 20:23

There are six different ways that the images can be put in the tags. Pick one of them using random:

var index = Math.floor(Math.random()*6);
var ids = [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]][index];
document.getElementById('img'+ids[0]).src = '1.jpg';
document.getElementById('img'+ids[1]).src = '2.jpg';
document.getElementById('img'+ids[2]).src = '3.jpg';

Klaster_1 Нет войне · Answer 3 · 2010-11-12T20:59:17.700

1

Math.floor(Math.random()*3)+1;

But distribution won't be uniform.

edited Nov 12 '10 at 20:59

answered Nov 12 '10 at 19:59

Klaster_1 Нет войне

11,790
9
61
73

Yes, I have read some articles, Math.random() just run for one item, not three... – yuli chika Nov 12 '10 at 20:07
You can run code multiple times, just write a function to replace number in img's src attribute. – Klaster_1 Нет войне Nov 12 '10 at 20:10

How to use Math.random() to distribute three pictures into three img elements?

3 Answers3