Print array in random order?

Question

I'm trying to output a javascript array of 4 items in a random order. Problem is, I can only get one to print randomly, like this:

Sequence:

Diet Coke

..but I would like it to print something similar to:

Sequence:

Diet Coke

Psuedo Coke

None-psuedo Coke

Coke Zero

..in a random order, of course.

<div id="test1"></div>
<div id="test1-drinks"></div>

<script>

    var contents=new Array()
    contents[0]='Coke Zero'
    contents[1]='Diet Coke'
    contents[2]='Psuedo Coke'
    contents[3]='None-psuedo Coke'


    var i=0
    var random
    var spacing="<br>"
    while (i<contents.length){
        random=Math.floor(Math.random()*contents.length)
        document.getElementById('test1').innerHTML = "Sequence:<br>";
        if (contents[random]!="selected"){
            document.getElementById('test1-drinks').innerHTML = contents[random]+spacing;
            //mark element as selected
            contents[random]="selected"
            i++
        }
    }

</script>

I was hoping the while-loop would cover that for me, but it's not.. Any help is appreciated, and languages php, jQuery and JavaScript are all much welcome.

EDIT: Script's from here, but I don't want document.write to be used to I tried fixing it up.

[The procedure to follow is called "shuffling".](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle) — Pointy, May 11 '16 at 14:21
@Pointy I'll give that a Google. Thing is that this script was working, till I tried to adjust it, and I can't see why it isn't working as of right now. — Algernop K., May 11 '16 at 14:22
@AlgernopK. no need to google - my comment is a link to the Wikipedia page. — Pointy, May 11 '16 at 14:24
I don't have any flag remaining. Could someone flag the question as the 1000th duplicate of http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript? — Regis Portalez, May 11 '16 at 14:30

score 2 · Answer 1 · answered May 11 '16 at 14:25

You could splice the array with a random index until the array is empty.

var contents = ['Coke Zero', 'Diet Coke', 'Psuedo Coke', 'None-psuedo Coke'];

while (contents.length) {
    document.write(contents.splice(Math.floor(Math.random() * contents.length), 1) + '<br>');
}

score 1 · Answer 2 · answered May 11 '16 at 14:27

1

Step 1: Define your array:

var contents=new Array()
    contents[0]='Coke Zero'
    contents[1]='Diet Coke'
    contents[2]='Psuedo Coke'
    contents[3]='None-psuedo Coke'

Step 2: Randomly order the array:

contents.sort(function() {
  return .5 - Math.random();
});

Step 3: Print the values:

$.each(contents, function(index,value) {
    document.getElementById('test1-drinks').append(value + "<br/>");
});

Your problem

You add 1 to i even after you collide with a value that was already selected, so you will not always print 4 times.
You override the data each time you print using innerHTML =. You need to allow for the old html to stay there, by using append.

answered May 11 '16 at 14:27

Glubus

2,764
1
10
26

i would not use sort for a single loop task. – Nina Scholz May 11 '16 at 14:32
Clearly the creation of the random ordering can be implemented in a better way performance wise. However, it is not relevant to the question. OP can decide for him/herself what implementation he/she wants to use to create the random ordering, though I like this method for examples like these because of its compactness. – Glubus May 11 '16 at 14:37
Also, unless you were not talking about the time complexity of this solution, sorting once is less costly then splicing `n` times, as a single splice is `O(n)` complex, resulting in a `O(n^2)` complex solution as opposed to the `O(n log n)` complex sorting method. No offense taken! – Glubus May 11 '16 at 14:41

score 0 · Accepted Answer · answered May 11 '16 at 14:24

0

My bad. Adjusted:

document.getElementById('test1-drinks').innerHTML = contents[random]+spacing;

to

document.getElementById('test1-drinks').innerHTML += contents[random]+spacing;

so I wouldn't keep replacing the randomized order.

answered May 11 '16 at 14:24

Algernop K.

467
2
18

Print array in random order?

3 Answers3