choose random array and then an element from this array

Question

I'm trying to figure out if it's possible to first choose a random array (on load) and then an element from this chosen array. So for example I have:

    var colorsOne = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsTwo = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsThree = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsFour = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsFive = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsSix = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsSeven = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsEight = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsNine = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsTen = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsEleven = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsTwelve = ["#CCCCCC","#333333","#990099","#990099"];

12 arrays (each one will eventually be populated with different hex codes), I first need to choose one of these array and then one hex code (at random) from this array.

e.g.

var rand = Math.floor(Math.random() * 4);               
$('.header-wrap').css("background-color", colorsEight[rand]);

this will take a random element from coloursEight array, but I've had to program that, I need to choose an array randomly first and THEN choose an element from this array.

Any suggestions for this would be greatly appreciated!

Use an object or array to store the twelve arrays, instead of separate identifiers. — guest271314
– guest271314, Commented Dec 15, 2016 at 19:11

T.J. Crowder · Accepted Answer · 2016-12-15 19:12:43Z

The answer is pretty much inherent in the question. :-) Put the arrays into an array, then do the same thing you're doing:

var colors = [
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"]
];

var array = colors[Math.floor(Math.random() * colors.length)];
var color = array[Math.floor(Math.random() * array.length)];
$('.header-wrap').css("background-color", color);

If for some reason you need those separate array variables, you can still gather them together:

var colorsOne = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsTwo = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsThree = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsFour = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsFive = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsSix = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsSeven = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsEight = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsNine = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsTen = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsEleven = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsTwelve = ["#CCCCCC","#333333","#990099","#990099"]
var colors = [
    colorsOne,
    colorsTwo,
    colorsThree,
    colorsFour,
    colorsFive,
    colorsSix,
    colorsSeven,
    colorsEight,
    colorsNine,
    colorsTen,
    colorsEleven,
    colorsTwelve
];

var array = colors[Math.floor(Math.random() * colors.length)];
var color = array[Math.floor(Math.random() * array.length)];
$('.header-wrap').css("background-color", color);

Bryant Makes Programs · Accepted Answer · 2016-12-15 19:12:39Z

1

You simply need to generate a 2-dimensional array from all your existing arrays.

var super_array = [colorsOne, colorsTwo, ...];

Then simply grab a random index for super_array and you now have a single array that you can use to your hearts desire.

var rand_x = Math.floor(Math.random() * 4); 
var rand_y = Math.floor(Math.random() * 4);              
$('.header-wrap').css("background-color", super_array[rand_x][rand_y]);

answered Dec 15, 2016 at 19:12

Bryant Makes Programs

1,7543 gold badges18 silver badges42 bronze badges

Comments

Rafael De Leon · Accepted Answer · 2016-12-15 19:31:02Z

0

function randomArrVal(arr) {
 return arr[Math.floor(arr.length * Math.random())];
}
var array2D = [
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"]
];

$('.header-wrap').css("background-color", randomArrVal(randomArrVal(array2D)));

edited Dec 15, 2016 at 19:31

answered Dec 15, 2016 at 19:18

Rafael De Leon

1,5801 gold badge12 silver badges11 bronze badges

Comments

Poiz · Accepted Answer · 2016-12-15 19:40:55Z

There seems to be no reason for creating named arrays. You could just create a Multi-Dimensional Array and get the Color you want off it. The snippet below demonstrates that....

    // BUNDLE ALL THE INDIVIDUAL ARRAY OF COLORS
    // INTO ONE SINGLE ARRAY THUS CREATING A MULTI-DIMENSIONAL ARRAY.
    var arrHexColors    = [
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"]
    ];

    // IF NECESSARY (SHOULD THE KEYS BE IMPORTANT TO YOU);
    // CREATE AN ARRAY TO HOLD THE KEYS TO THE INDIVIDUAL ARRAY...
    // THE IDEA HERE IS TO CREATE A PARALLEL ARRAY, WITH THE KEYS HERE
    // CORRESPONDING TO THE KEYS REPRESENTING ITS CONTENT IN THE MULTI-DIMENSIONAL ARRAY.
    var arrColorKeys    = [
        'colorsOne',
        'colorsTwo',
        'colorsThree',
        'colorsFour',
        'colorsFive',
        'colorsSix',
        'colorsSeven',
        'colorsEight',
        'colorsNine',
        'colorsTen',
        'colorsEleven',
        'colorsTwelve'
    ];

    // GENERATE A RANDOM NUMBER THAT SHOULD BE 
    // "ONE" LESS THAN THE LENGTH OF THE MULTI-DIMENSIONAL ARRAY
    var arrRandomColor  = arrHexColors[ Math.floor(Math.random() * arrHexColors.length) ];

    // DO THE SAME FOR THE COLOR KEYS ARRAY - IF NEEDED....
    var arrRandomKey    = arrRandomColor[ Math.floor(Math.random() * arrRandomColor.length) ];

    // USING THE GENERATED RANDOM NUMBER PICK THE ARRAY 
    // CORRESPONDING TO THAT KEY
    var randomColor     = arrRandomColor[ Math.floor(Math.random() * arrRandomColor.length) ];

    $('.header-wrap').css("background-color", randomColor);

    console.log(randomColor);

Collectives™ on Stack Overflow

choose random array and then an element from this array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related