Random Color Strings

Question

First, this is not a duplicate of: Generate random string/characters in JavaScript

I specifically want a string to change to random colours starting on green. I am writing in JS

function changeColor()
{
  var change;
  for( var i=0; i < 11; i++ )
  {
    change += script.charAt(Math.floor(Math.random() //Input ur suggestion here, I suspect it is the script variable and different colours
    script = document.getElementById('txt');
    script.style.color = "#33cc33";
  }
}

OK, and how about http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript still not duplicate? — Tomas Pastircak, Apr 05 '14 at 19:51

score 1 · Answer 1 · answered Apr 05 '14 at 19:53

Create an array with the valid hex color values:

var values = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', ... '9'];

Get a random value from that array:

var hex = values[Math.floor(Math.random() * values.length)];

...six times:

var hex = '#';
for (var i = 0; i < 6; i++ ) {
  hex += values[Math.floor(Math.random() * values.length)];
}

this can be made into a function:

function getRandomColor() {
    var values = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    var hex = '#';
    for (var i = 0; i < 6; i++) {
        hex += values[Math.floor(Math.random() * values.length)];
    }
    return hex;

}

Fiddle

score 1 · Accepted Answer · answered Apr 05 '14 at 19:53

1

The for loop completes right away, you need a timeout to actually see the color change, and a random color generator to generate the colors, then throw in a recursive IIFE and you're there :

var color = '#33cc33',
    elem  = document.getElementById('txt');

(function fn() {
    elem.style.color = color;
    setTimeout(function() {
        color = '#'+Math.floor(Math.random()*16777215).toString(16);
        fn();
    }, 500);
})();

FIDDLE

answered Apr 05 '14 at 19:53

adeneo

312,895
29
395
388

Just curious, why did you multiply by 16777215? – Spunk Apr 05 '14 at 20:15
It's the number of colors (minus 1), #FFFFFF converts to 16,777,215 in base ten, and we start at zero, so there are 16 777 216 colors available. – adeneo Apr 05 '14 at 20:21
Also, when you declared the function why is there a parentheses before it? And is there a simpler way to use setTimeOut? – Spunk Apr 05 '14 at 20:24
The parenthesis makes it execute without calling it, it's an IIFE (Immediately Invoked Function Expression). Not sure if there is a simpler way to use the timeout, but you could use an interval instead – adeneo Apr 05 '14 at 20:37
Really sorry for the overload of questions, but I'm twelve so this is kinda hard to process. When you call the setTimeOut method, why do you follow it with: (function() {. You never call that function. Again sorry, but what is the .toString(16) for – Spunk Apr 05 '14 at 21:55
The function in setTimeout is an anonymous function, it's a common way to use a callback in setTimeout, [see this](http://www.w3schools.com/jsref/met_win_settimeout.asp). The entire line with the `toString(16)` is a little complicated, but it creates the random color, and `toString(16)` simply converts the number we get from the math to a string with a base 16 (10 is decimal system etc.) – adeneo Apr 05 '14 at 22:01

Random Color Strings

2 Answers2