Question 36285 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to change multiple squares color all in once? – Jquery

I want to change 6 squares colors all in once and each with a different color.

function randomNum() {
  return Math.floor(Math.random() * 256);
}
function randomRGB() {
  var red = randomNum();
  var green = randomNum();
  var blue = randomNum();
  return [red,green,blue];
}

I have this JavaScript code that generates random RGB colors values. How can I make it so that each square gets a random color each time I refresh? I can do it with 6 lines of code, but I’m trying to learn easier ways to code. If anyone can do it in a simpler code, I would be grateful!

PintSreen

Tags:

3

Answers


  1. 0

    Your current code is reasonably short and quite readable. Consider sticking with it.

    Alternatives include

    • Using (and immediately returning) Array.from with randomNum as a mapper function to construct an array with 3 random values
    • Using arrow functions for concise return
    const randomNum = () => Math.floor(Math.random() * 256);
const randomRGB = () => Array.from({ length: 3 }, randomNum);

console.log(randomRGB());

    If you want to do this 6 times, then you might use another Array.from.

    const randomNum = () => Math.floor(Math.random() * 256);
const randomRGB = () => Array.from({ length: 3 }, randomNum);
const randomSquares = numSquares => Array.from({ length: numSquares }, randomRGB);

console.log(randomSquares(6));
    Login or Signup to reply.
  2. 0

    You can simply grid a six digit hexadecimal number and then use them for your color.
    Like the following number for example: #ffffff (which is white)

    function random hexColor() {
   return ((Math.random() * 0xfffff * 1000000).toString(16)).slice(0,6);
}
    Login or Signup to reply.
  3. 0

    A simple approach: use the hsl() color function and generate a random Hue color (from 0 to 360)

    const rand = (min, max) => ~~(Math.random() * (max - min) + min);

document.querySelectorAll(".grid > div").forEach(elBox => {
  elBox.style.background = `hsl(${rand(0, 360)}, 100%, 50%)`;
});
    .grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid > * {
  margin: 0.5rem;
  height: 3rem;
  width: 3rem;
}
    <div class="grid">
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>

    The nice thing about it is that you only change the Hue (color), but the saturation and lightness remain the same for all your elements.

    Example with desaturated, darker colors:

    const rand = (min, max) => ~~(Math.random() * (max - min) + min);

document.querySelectorAll(".grid > div").forEach(elBox => {
  elBox.style.background = `hsl(${rand(0, 360)}, 70%, 30%)`;
});
    .grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid > * {
  margin: 0.5rem;
  height: 3rem;
  width: 3rem;
}
    <div class="grid">
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>

    Eventually you can generate also a random value in range for the Lightness and Saturation (0 to 100 %)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search