Estoy tratando de generar una matriz de JavaScript de 4 elementos en un orden aleatorio. El problema es que solo puedo obtener uno para imprimir al azar, así:

Secuencia:

Coca-Cola Light

..pero me gustaría imprimir algo similar a:

Secuencia:

Coca-Cola Light

Pseudo Coca

Coca-Cola sin psuedo

Coca Cola Cero

..en un orden aleatorio, por supuesto.

<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>

Esperaba que el ciclo while me cubriera eso, pero no lo es. Se agradece cualquier ayuda, y los lenguajes php, jQuery y JavaScript son muy bienvenidos.

EDITAR: Script de aquí, pero no quiero que document.write se use para Traté de arreglarlo.

3
Algernop K. 11 may. 2016 a las 17:20

3 respuestas

La mejor respuesta

Culpa mía. Equilibrado:

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

Para

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

Así que no seguiría reemplazando el orden aleatorio.

0
Algernop K. 11 may. 2016 a las 14:24

Puede empalmar la matriz con un índice aleatorio hasta que la matriz esté vacía.

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>');
}
2
Nina Scholz 11 may. 2016 a las 14:25

Paso 1: define tu matriz:

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

Paso 2: ordena aleatoriamente la matriz:

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

Paso 3: imprima los valores:

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

Tu problema

  1. Agrega 1 a i incluso después de colisionar con un valor que ya estaba seleccionado, por lo que no siempre imprimirá 4 veces.
  2. Anula los datos cada vez que imprime utilizando innerHTML =. Debe permitir que el html anterior permanezca allí, mediante el uso de append.
1
Glubus 11 may. 2016 a las 14:27