JavaScript color Array

Question

I watched a codecademy video and have been unable to randomize my color array. The colors are not random. I am not sure what I am doing wrong.

    function getRandomColor() {
    var color;
    var colorArray = [
        "#FF6633",
        "#FFB399",
        "#FF33FF",
        "#FFFF99",
        "#00B3E6",
        "#E6B333",
        "#3366E6",
        "#999966",
        "#809980",
        "#E6FF80",
        "#1AFF33",
        "#999933",
        "#FF3380",
        "#CCCC00",
        "#66E64D",
        "#4D80CC",
        "#FF4D4D",
        "#99E6E6",
        "#6666FF"
    ];
    for (var i = 0; i < colorArray; i++) {
        color = colorArray[Math.floor(Math.random() * colorArray.length)];
    }
    return color;
}

Does this answer your question? [How to randomize (shuffle) a JavaScript array?](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) — Alon Eitan, Feb 23 '20 at 11:50
Can you clarify what you mean by randomizing your color array? Right now your code iterates over all colors and then returns the last one that was randomly selected. — jBuchholz, Feb 23 '20 at 12:10

dan1st · Answer 1 · 2020-02-23T14:28:11.083

I don't know why you need the for loop but I am quite sure that it is wrong.

What is the problem?

In your case, the loop won't be executed because colorArray(in the condition) is not a number. You may wanted to use colorArray.length instead but there is no point for the loop in that case too.

select one random color

If you just want to select one color, you can just replace the whole loop (and the return statement) with:

return colorArray[Math.floor(Math.random() * colorArray.length)];

This will just return a random color.

shuffle it

If you want to shuffle the whole array, you could use the following loop:

for (var i = 0; i < colorArray.length; i++) {
    let r=Math.floor(Math.random() * colorArray.length);
    color = colorArray[r];
    colorArray[r]=colorArray[i];
    colorArray[i]=color;
}

I think the OP is trying to shuffle the array itself (_"...and have been unable to randomize my color **array**_") — Alon Eitan, Feb 23 '20 at 11:51

score 1 · Answer 2 · answered Feb 23 '20 at 11:57

add length to your loop for (var i = 0; i < colorArray.length; i++)

function getRandomColor() {
    var color;
    var colorArray = [
       "#FF6633",
       "#FFB399",
       "#FF33FF",
       "#FFFF99",
       "#00B3E6",
       "#E6B333",
       "#3366E6",
       "#999966",
       "#809980",
       "#E6FF80",
       "#1AFF33",
       "#999933",
       "#FF3380",
       "#CCCC00",
       "#66E64D",
       "#4D80CC",
       "#FF4D4D",
       "#99E6E6",
       "#6666FF"
    ];
    for (var i = 0; i < colorArray.length; i++) {
       color = colorArray[Math.floor(Math.random() * colorArray.length)];
    }
    return color;
}

score 0 · Answer 3 · answered Feb 23 '20 at 12:00

0

I think you forgot to put the ".length" on your for loop. for(var i = 0; i < colorArray.length; i++)

answered Feb 23 '20 at 12:00

Heisenberg

55
8

nick zoum · Answer 4 · 2020-02-23T12:04:48.397

If you want to shuffle the array you can use the following function:

var colorArray = ["#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6", "#E6B333", "#3366E6", "#999966", "#809980", "#E6FF80", "#1AFF33", "#999933", "#FF3380", "#CCCC00", "#66E64D", "#4D80CC", "#FF4D4D", "#99E6E6", "#6666FF"];

function shuffleArray() {
  colorArray.sort(function() {
    return Math.random() - 0.5;
  });
}

shuffleArray();
console.log(colorArray);

If you just want to get a random item you can do:

var colorArray = ["#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6", "#E6B333", "#3366E6", "#999966", "#809980", "#E6FF80", "#1AFF33", "#999933", "#FF3380", "#CCCC00", "#66E64D", "#4D80CC", "#FF4D4D", "#99E6E6", "#6666FF"];

function getRandomColor() {
  return colorArray[Math.random() * colorArray.length | 0];
}

console.log(getRandomColor());

score 0 · Answer 5 · edited Feb 23 '20 at 12:24

0

You can just create a function which randomise.

function randomizeArr () {
   const randomLength=Math.floor(Math.random() * colorArr.length);
   return colorArr[randomLength];
}

And in your for-loop your condition is wrong it should have been i < colorArr.length instead of colorArr.

Generally arr.length is a property it not a method like map() or reduce() etc.

Hope my answer is clear!

edited Feb 23 '20 at 12:24

Kate Orlova

3,225
5
11
35

answered Feb 23 '20 at 12:16

Rohit

1
1

score 0 · Answer 6 · edited May 19 '22 at 01:42

This program produces a random background color by pressing a button. The colors are "X11 colors" from the CSS3 specification WebColors. I manually loaded these colors to the array, which is hopefully useful information for somebody. Of course, you can probably create the same array by doing a webscrape has anybody done this.

const btn = document.querySelector('button');

var items = ['MediumVioletRed', 'DeepPink', 'PaleVioletRed', 'HotPink', 
   'LightPink', 'Pink', 'DarkRed', 'Red', 'Firebrick', 'Crimson', 
   'IndianRed', 'LightCoral', 'Salmon', 'DarkSalmon', 
   'LightSalmon', 'OrangeRed', 'Tomato', 'DarkOrange', 'Coral', 
   'Orange', 'DarkKhaki', 'Gold', 'Khaki', 'PeachPuff', 'Yellow', 
   'PaleGoldenrod', 'Moccasin', 'PapayaWhip', 'LightGoldenrodYellow', 
   'LemonChiffon', 'LightYellow','Maroon', 'Brown', 'SaddleBrown', 'Sienna', 
   'Chocolate', 'DarkGoldenrod', 'Peru', 'RosyBrown', 'Goldenrod', 
   'SandyBrown', 'Tan', 'Burlywood', 'Wheat', 'NavajoWhite', 'Bisque', 
   'BlanchedAlmond', 'Cornsilk','DarkGreen', 'Green', 'DarkOliveGreen', 
   'ForestGreen', 'SeaGreen', 'Olive', 'OliveDrab', 'MediumSeaGreen', 
   'LimeGreen', 'Lime', 'SpringGreen', 'MediumSpringGreen', 'DarkSeaGreen', 
   'MediumAquamarine', 'YellowGreen', 'LawnGreen', 'Chartreuse', 'LightGreen', 
   'GreenYellow', 'PaleGreen', 'Teal', 'DarkCyan', 'LightSeaGreen', 
   'CadelBlue', 'DarkTurquoise', 'MediumTurquoise', 'Turquoise', 'Aqua', 
   'Cyan', 'AquaMarine', 'PaleTurquoise', 'LightCyan', 'Navy', 'DarkBlue', 
   'MediumBlue', 'Blue', 'MidnightBlue', 'RoyalBlue', 'SteelBlue', 
   'DodgerBlue', 'DeepSkyBlue', 'CornFlowerBlue', 'SkyBlue', 'LightSkyBlue', 
   'LightSteelBlue', 'LightBlue', 'PowderBlue', 'Indigo', 'Purple', 
   'DarkMagenta', 'DarkViolet', 'DarkSlateBlue', 'BlueViolet', 'DarkOrchid', 
   'Fuchsia', 'Magenta', 'SlateBlue', 'MediumSlateBlue', 
   'MediumOrchid', 'MediumPurple', 'Orchid', 'Violet', 'Plum', 
   'Thistle', 'Lavender', 'MistyRose', 'AntiqueWhite', 'Linen', 
   'Beige', 'WhiteSmoke', 'LavenderBlush', 'OldLace', 'AliceBlue', 
   'Seashell', 'GhostWhite', 'Honeydew', 'ForalWhite', 'Azure', 
   'MintCream', 'Snow', 'Ivory', 'White', 'Black', 'DarkSlateGray', 
   'DimGray', 'SlateGrey', 'Gray', 'LightSlateGray', 'DarkGray', 
   'Silver', 'LightGray', 'Gainsboro'];

function random_item(items)
{
  
    return items[Math.floor(Math.random()*items.length)];
     
}



btn.addEventListener('click', () => {
   const rndWebCol = (random_item(items));

   document.body.style.backgroundColor = rndWebCol;
  
   console.log(rndWebCol);
  
});

This program produces a random background color by pressing a button. The colors are "X11 colors" from the CSS3 specification [WebColors](https://en.wikipedia.org/wiki/Web_colors). I manually loaded these colors to the array, which is hopefully useful information for somebody. Of course, you can probably create the same array by doing a webscrape has anybody done this. — ChristopherFord2525, May 14 '22 at 05:44
Please use the [edit] link below your post to add information instead of posting in the comments — Suraj Rao, May 14 '22 at 05:46

JavaScript color Array

6 Answers6

What is the problem?

select one random color

shuffle it