1

I'm completely new to JavaScript. From the code below, what is the proper way to make sure that the background colors doesn't repeat themselves when clicked?

Add: I need the next color not to be the previous color because if so you can't know if the page works properly when clicked. It's okay if the whole array repeat itself randomly so long as the same color isn't repeated twice subsequently e.g. red and then red again.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <div class="row vh-100 d-flex align-items-center">
                <div class="col text-center">
                    <button>Click Me!</button>
                </div>
            </div>
        </div>
    </div>
    <script>
    const button = document.querySelector('button')
    const body = document.querySelector('body')
    const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple']

    body.style.backgroundColor = 'violet'
    button.addEventListener('click', changeBackground)

    function changeBackground(){
        const colorIndex = parseInt(Math.random()*colors.length)
        body.style.backgroundColor = colors[colorIndex]
    }
    </script>
</body>
</html>
user3134685
  • 39
  • 1
  • 7
  • 1. Shuffle the array 2. Take items from it in sequence. It's random and it's non-repeating. – VLAZ May 20 '20 at 21:00
  • 1
    I need to understand... You have 6 colors in total... so what if user clicks 6 times and then no other unique color is available.. eventually it's going to be repeated....?? – Sajjad Hossain Sagor May 20 '20 at 21:07
  • Hi, I'll edit the question, I just need the next color not to be the previous color because if so you can't know if the page works properly when clicked. It's okay if they repeat themselves so long as the same color isn't repeated twice. Edit: e.g. after red, it can't be red again just to make it clear that the page works properly. – user3134685 May 20 '20 at 21:15
  • Mind providing a sample code? Sorry, I'm a complete newbie. – user3134685 May 20 '20 at 22:34
  • if you use [randojs.com](https://randojs.com), you can do `colors = randoSequence(colors); var nextColor = colors.pop().value;` – Aaron Plocharczyk May 21 '20 at 03:26

1 Answers1

0

The color code is represent is 3 ways:

  • COLOR NAME

  • HEX color code

  • RGB color code.

    The Hex color code - consist of hashcode (#) followed by a hexadecmial number. eg: RED has hex color code = #FF0000.

We can use Math.random() function to generate random hexadecimal color code.

Below is the working code snippet.

function GenerateRandomColor() {
  return '#' + Math.floor(Math.random()*16777215).toString(16);
}

Please note that Math.random() function returns a floating-point, with scale of 16 (place after decimal) and if we multiply it by some large number like above, chance of getting duplicate values is very very thin.

Community
  • 1
  • 1
Rishu Ranjan
  • 494
  • 4
  • 7
  • You cannot guarantee that they won't repeat or that they won't be close enough to essentially be repeating. Also, they might clash with other colours. – VLAZ May 20 '20 at 21:30
  • If we talk about probability, then it will be around 1/ 16000000 in the above case, which is very very very small number. But yes, you are right. – Rishu Ranjan May 20 '20 at 21:40
  • @RishuRanjan : since we're talking math here, I would remind that the major concern of OP is not to get sequentially colors that are **visually** same, so the actual odds of getting 2 visually indistinguishable colors (even though, having different hex codes) in a row are **much** greater than your estimation. – Yevhen Horbunkov May 20 '20 at 22:11
  • I like this answer since it's the simplest (I'm a complete newbie) but it doesn't guarantee that the colors are visually distinguishable. Sorry, what does '#' mean in return '#'? Can't find the answer with Google. – user3134685 May 20 '20 at 22:33
  • 1
    color code is represent is 3 ways: COLOR NAME | HEX color code| RGB color code. Hex color code - consist of hascode (#) followed by a hexadecmial number. eg: RED has hex color code = #FF0000. – Rishu Ranjan May 21 '20 at 05:33