Need some help with Javascript.

Description: there are 3 different color binations (pallets). Every bination has 3 colors.

Goal: randomly choose color bination on page load and change elements like: background-color, font-color, underline-color.

Problem: can't figure out how to make it for color bination, but not a 1 color like in code example below.

Example:

• Pallet-1: red, blue, green
• Pallet-2: yellow, cyan, orange

• Pallet-3: cyan, orange, blue

  1. Script randomly choosing Pallet-2.
  2. Change background-color to yellow, font-color to cyan, border-color to orange.

Sorry if it's too simple, but I spent a day and found a solution for random color pick of 1 color only from the list, but can't make it work with color binations.

Thanks in advance.

JS:

$(document).ready(function(){ 
  var colors = ['red','blue','green','yellow','cyan','orange'];
  var new_color = colors[Math.floor(Math.random()*colors.length)];
  $('#color-div').css('background-color',new_color);
});

CSS:

#color-div{
  border:1px solid gray;
  width:50px;
  height:50px;
}

HTML:

<div id="container">
  <div id="color-div">
  </div>
</div>

Fiddle

Need some help with Javascript.

Description: there are 3 different color binations (pallets). Every bination has 3 colors.

Goal: randomly choose color bination on page load and change elements like: background-color, font-color, underline-color.

Problem: can't figure out how to make it for color bination, but not a 1 color like in code example below.

Example:

• Pallet-1: red, blue, green
• Pallet-2: yellow, cyan, orange

• Pallet-3: cyan, orange, blue

  1. Script randomly choosing Pallet-2.
  2. Change background-color to yellow, font-color to cyan, border-color to orange.

Sorry if it's too simple, but I spent a day and found a solution for random color pick of 1 color only from the list, but can't make it work with color binations.

Thanks in advance.

JS:

$(document).ready(function(){ 
  var colors = ['red','blue','green','yellow','cyan','orange'];
  var new_color = colors[Math.floor(Math.random()*colors.length)];
  $('#color-div').css('background-color',new_color);
});

CSS:

#color-div{
  border:1px solid gray;
  width:50px;
  height:50px;
}

HTML:

<div id="container">
  <div id="color-div">
  </div>
</div>

Fiddle

• javascript
• html
• css

• You are telling us what you want to achieve, and you are showing us your code, but you're not telliing us what exactly is not working (any errors etc.?). There is no actual question in your question... – Sarah Groß Commented Oct 1, 2019 at 12:46
• Thank you for your ment. I've edited the question. The problem is: I can't figure out how to make random color bination (pallet). My example choose and change only one color. – Chto Stoic Commented Oct 1, 2019 at 12:50
• Yes, but it changes 1 color and I'm looking for solution to randomly pick a bination of colors and apply it to different elements in html. – Chto Stoic Commented Oct 1, 2019 at 12:53

3 Answers 3

Updated answer after clarification (picking a random colour set):

$(document).ready(function() {
  var palettes = [
    ['red', 'blue', 'green'],
    ['yellow', 'cyan', 'orange'],
    ['cyan', 'orange', 'blue']
  ];
  var randomPalette = palettes[Math.floor(Math.random() * palettes.length)];
  
  var new_bgcolor = randomPalette[0];
  var new_textcolor = randomPalette[1];
  var new_bordercolor = randomPalette[2];

  $('#color-div').css({
    'background-color': new_bgcolor,
    'color': new_textcolor,
    'border-color': new_bordercolor
  });
});

#color-div {
  border: 1px solid gray;
  width: 50px;
  height: 50px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="color-div">
    test
  </div>
</div>

Old answer before the clarification (picking three random but unique colours):

You have to remove the randomly selected colour from the array of colours before picking the next one. You can do so by using Array.prototype.splice().

As there is no css property for text underline colour, I changed the border colour in this example.

$(document).ready(function() {
  var colors = ['red', 'blue', 'green', 'yellow', 'cyan', 'orange'];
  var new_bgcolor = colors.splice(Math.floor(Math.random() * colors.length), 1);
  var new_textcolor = colors.splice(Math.floor(Math.random() * colors.length), 1);
  var new_bordercolor = colors.splice(Math.floor(Math.random() * colors.length), 1);

  $('#color-div').css({
    'background-color': new_bgcolor,
    'color': new_textcolor,
    'border-color': new_bordercolor
  });
});

#color-div {
  border: 1px solid gray;
  width: 50px;
  height: 50px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="color-div">
    test
  </div>
</div>

Gonna leave this just in case somebody wants the code without jQuery

window.onload = () => {

  const palettes = [
    ["red", "blue", "green"],
    ["yellow", "cyan", "orange"],
    ["cyan", "orange", "blue"]
  ];
  const randomPalette =
    palettes[Math.floor(Math.random() * palettes.length)];

  let bgColor = randomPalette[0];
  let textColor = randomPalette[1];
  let borderColor = randomPalette[2];

  const div = document.getElementById("color-div").style;

  div.backgroundColor = bgColor;
  div.borderColor = borderColor;
  div.color = textColor;
};

Perhaps you can do something like this:

var colors = ['red','blue','green','yellow','cyan','orange'];
var getRandomColor = () => colors[Math.floor(Math.random()*colors.length)];
var color1 = getRandomColor(); 
var color2 = getRandomColor());
var color3 = getRandomColor();
$(document).ready(function(){ 
  $('#color-div-1').css('background-color', color1);
  $('#color-div-2').css('background-color', color2);
  // etc...
}

and your HTML would contain these new classes of course:

<div id="container">
  <div id="color-div-1" />
  <div id="color-div-2" />
</div>