How to get a random value from an array?

Question

This is a bit different from the other questions here. I've looked at the other questions and I still can't solve the problem. The difference is explained in the paragraph below.

Firstly, here's the code.

        var colors = ['#ffff00', '#FF009C'];
        var random_color = colors[Math.floor(Math.random() * colors.length)];
        for (var i = 0; i < document.querySelectorAll('#menu a').length; i++) {
        document.querySelectorAll('#menu a')[i].style.color = random_color;}

<div id="menu">
        <h1><a>Project 1<a></h1>
        <h1><a>Project 2</a></h1>
        <h1><a>Project 3</a></h1>
        <h1><a>Project 4</a></h1>
        </div>

What I am trying to do is to select one of the values in the array as the colour for '#menu a'. I don't want a value in between the values I wrote or anything. Just either #ffff00 or #ff009c or any value that I put in the array.

edit: Thanks everyone! I just realised that my code is working. Sorry for making you all solve my problem when it wasn't a problem. My bad.

Turn `random_color` into a function. That way each `h1` will be given a different colour. Otherwise they will all have the same colour. — evolutionxbox, Apr 11 '17 at 10:01
Possible duplicate of [Generate random number between two numbers in JavaScript](http://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript) — Arg0n, Apr 11 '17 at 10:03
It's hilarious how people jump to write answers on his random integer code when it's perfectly fine. @SeanPoh can you clarify what the issue is? I converted your code to a code snippet and it seems to work fine. It chooses a random color from a menu and sets it as all the menu item's colors. — aug, Apr 11 '17 at 10:11
Your code is almost correct. You just need to move your random code generator code inside your loop. — Yogesh Mistry, Apr 11 '17 at 10:16
@aug You're right. I just realised too that my code was correct. I thought the code was generating a colour in between the two values I put in the array, when it was actually doing what I wanted. My bad. — Sean Poh, Apr 11 '17 at 10:22

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

Check this solution on how to get random number between two values

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Now just replace min and max with 0 and length of array

var random_color = colors[getRandomInt(0, colors.length-1)];

edited May 23 '17 at 11:54

Community

1
1

answered Apr 11 '17 at 10:02

gurvinder372

66,980
10
72
94

score 1 · Accepted Answer · answered Apr 11 '17 at 10:05

1

Your code is almost correct. You just need to move your random code generator code inside your loop.

var colors = ['#ffff00', '#FF009C'];

for (var i = 0; i < document.querySelectorAll('#menu a').length; i++) {
    var random_color = colors[Math.floor(Math.random() * colors.length)];
    document.querySelectorAll('#menu a')[i].style.color = random_color;
}

answered Apr 11 '17 at 10:05

Yogesh Mistry

2,082
15
19

That's interesting. The only issue is that I want the colour of all the links to be the same. By moving the random code generator code inside the loop, it will generate different colours. But this is useful; I should pay attention to this just in case I need to get different colours at once for different things. – Sean Poh Apr 11 '17 at 10:25
1

If you want *the colour of all the links to be the same* then your code was absolutely **perfect**. you need not look for a solution here – Yogesh Mistry Apr 11 '17 at 10:36

score 1 · Answer 3 · answered Apr 11 '17 at 10:05

1

Use: var color = colors[Math.floor(Math.random() * (colors.length - 1))]

answered Apr 11 '17 at 10:05

Tal

131
1
10

score 1 · Answer 4 · answered Apr 11 '17 at 10:10

Change your line:

var random_color = colors[Math.floor(Math.random() * colors.length)];

into a function:

random_color = function() { return colors[Math.floor(Math.random() * colors.length)]; }

This way it will be executed for every anchor in your menu

    var colors = ['#ffff00', '#FF009C'];
    
    random_color = function() {
     return colors[Math.floor(Math.random() * colors.length)];
    }
    
    for (var i = 0; i < document.querySelectorAll('#menu a').length; i++) {
    document.querySelectorAll('#menu a')[i].style.color = random_color();}

    <div id="menu">
    <h1><a>Project 1</a></h1>
    <h1><a>Project 2</a></h1>
    <h1><a>Project 3</a></h1>
    <h1><a>Project 4</a></h1>
    </div>

How to get a random value from an array?

4 Answers4