Getting a Random hexadecimal using an array in JavaScript

Question

I have written a little code that generates a random color. It is based in an array that goes from 0 to 9 and A,B,C,D,E,F:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <title>Ejercicio 7</title>
    <script type="text/javascript">

        function changeColor() {
            const intensity = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "A", "B", "C", "D", "E", "F"];
            let randomColor1 = intensity[Math.floor(Math.random() * intensity.length)];
            let randomColor2 = intensity[Math.floor(Math.random() * intensity.length)];
            let randomColor3 = intensity[Math.floor(Math.random() * intensity.length)];
            let randomColor4 = intensity[Math.floor(Math.random() * intensity.length)];
            let randomColor5 = intensity[Math.floor(Math.random() * intensity.length)];
            let randomColor6 = intensity[Math.floor(Math.random() * intensity.length)];
            const randomColor = `#${randomColor1}${randomColor2}${randomColor3}${randomColor4}${randomColor5}${randomColor6}`;
            document.body.style.backgroundColor = randomColor;

        }
    </script>
</head>

<body onload="changeColor()">
    <button onclick="changeColor()">Pincha aquí</button>
</body>

</html>

The problem is I don't understand this piece of repeated code:

intensity[Math.floor(Math.random() * intensity.length)]

I know it gives me a random element from the array "intensity", but I don't know how it works. Can someone explain to me? Thank you in advance.

Basics of generating a random number in a range. `var x = Math.floor(Math.random() * intensity.length); var color = intensity[x] — epascarello, Feb 18 '20 at 17:07
That's overly complex, see [`Number.toString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString). — Teemu, Feb 18 '20 at 17:09
Does this answer your question? [Getting a random value from a JavaScript array](https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array) — Heretic Monkey, Feb 18 '20 at 17:23
thanks, I saw that question, but I din't really understood the whole thing. — Lucas, Feb 18 '20 at 17:29

Buddy Christ · Accepted Answer · 2020-02-18T18:04:04.003

1

With Math.random() you get a number (float) between 0 and 1 (but not 1 as Andreas points out).

If you want a number from 0 to X you have to multiply for X Math.random() * X.

And the index of intensity goes from 0 to intensity.length.

That's why you need Math.random() * intensity.length to get an index of intensity randomly.

As the result of this multiplication is a float you can use floor to strip decimals and then you have at this moment: Math.floor(Math.random() * intensity.length)

Which is the random index of intensity to get:

intensity[Math.floor(Math.random() * intensity.length)]

edited Feb 18 '20 at 18:04

answered Feb 18 '20 at 17:14

Buddy Christ

1,364
8
22

1

_"The Math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (**nclusive of 0, but not 1**)"_ – Andreas Feb 18 '20 at 17:19
1

The cero is after the nine, I forgot to write it for starting so I wrote it after the 9. Ok, now I understand it much better. I've done tests and now I get everything in the syntax. Thanks – Lucas Feb 18 '20 at 17:27

score 0 · Answer 2 · answered Feb 18 '20 at 17:30

0

you may find a lot of examples of random hex color generators online, for example, https://css-tricks.com/snippets/javascript/random-hex-color/:

function randomHexColor() {
  return Math.floor(Math.random()*16777215).toString(16);
}

answered Feb 18 '20 at 17:30

Constantin

3,655
1
14
23

Thank you, I know I can find many examples. The thing on the color was just the excuse to get a proper explanation on how Math.floor and Math.random work. – Lucas Feb 18 '20 at 17:33
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor Basically `Math.random()` generates a random number between 0 and 1, something like 0.12345. To get a random number between 0 and n, you generate a random number with `Math.random()` and multiply by N. The result will be something like 123.45, so you use `Math.foor` to convert it back to integer – Constantin Feb 18 '20 at 17:39
thanks again. Now I am trying to understand the function randomHexColor... I'm googling it :) – Lucas Feb 18 '20 at 17:52
got it! the hexadecimal and the value of 16777215 is related to colors and hexadecimal system... I didn't now that. – Lucas Feb 18 '20 at 18:00
Yes, 16777215 in decimal, is converted to FFFFFF in hex, which happens to be the maximum value for the hex color – Constantin Feb 19 '20 at 21:37

Getting a Random hexadecimal using an array in JavaScript

2 Answers2