How do I create an array of colour schemes and then randomly select one with JavaScript

Question

I'm trying to load a colour scheme, from a selection of pre-defined colour schemes, at random each time the page is loaded. Hopefully my attempt at coding it is self-explanatory, but my approach has been to create an array called 'colourSchemes', populate it with 3 colour schemes (with key value pairs defining the 3 colours that make up the scheme) and then store the selected colour scheme in a variable.

I've then attempted to assign a colour from the selected scheme to the fillStyle of an object. Unfortunately I'm drawing a blank (literally). Any help would be appreciated. Snippet:

//define colour schemes
var colourSchemes = [];
colourSchemes.colourScheme_1 = {colour_1 : "#84FFC9", colour_2 : "#AAB2FF", colour_3 : "#ECA0FF"};
colourSchemes.colourScheme_2 = {colour_1 : "#540D6E", colour_2 : "#EE4266", colour_3 : "#FFD23F"};
colourSchemes.colourScheme_3 = {colour_1 : "#FFBA49", colour_2 : "#20A39E", colour_3 : "#EF5B5B"};

//random colour scheme selected on load
var active_colourScheme = colourSchemes[Math.floor(Math.random() * colourSchemes.length)];

//background colour
ctx.fillStyle = active_colourScheme.colour_1;
ctx.fillRect(0, 0, canvasW, canvasH);

Answer 1

That is now how you populate an Array with values. In your case you can just put the values in the array during the array declaration:

const colourScheme_1 = {colour_1 : "#84FFC9", colour_2 : "#AAB2FF", colour_3 : "#ECA0FF"};
const colourScheme_2 = {colour_1 : "#540D6E", colour_2 : "#EE4266", colour_3 : "#FFD23F"};
const colourScheme_3 = {colour_1 : "#FFBA49", colour_2 : "#20A39E", colour_3 : "#EF5B5B"};
const colourSchemes = [colourScheme_1, colourScheme_2, colourScheme_3];

//random colour scheme selected on load
const active_colourScheme = colourSchemes[Math.floor(Math.random() * colourSchemes.length)];
console.log(active_colourScheme);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Or alternatively push() the values into the array. This works if you want to add values to the array later on after its declaration.

const colourSchemes = [];
const colourScheme_1 = {colour_1 : "#84FFC9", colour_2 : "#AAB2FF", colour_3 : "#ECA0FF"};
const colourScheme_2 = {colour_1 : "#540D6E", colour_2 : "#EE4266", colour_3 : "#FFD23F"};
const colourScheme_3 = {colour_1 : "#FFBA49", colour_2 : "#20A39E", colour_3 : "#EF5B5B"};
colourSchemes.push(colourScheme_1, colourScheme_2, colourScheme_3)

//random colour scheme selected on load
const active_colourScheme = colourSchemes[Math.floor(Math.random() * colourSchemes.length)];
console.log(active_colourScheme);

.as-console-wrapper { max-height: 100% !important; top: 0; }

I would recommend you read the article on Array which I have linked here (and above), so you see how you can use arrays properly in JavaScript.