0

I am trying to get something like this: rbg(random, random, random);

Now when I put in Math.floor(Math.random() * 255) + 1 into the area, it works but for some reason most of the numbers are stuck in 255 and rarely change.

My code is: 

function colorGen() {   
  document.getElementById("color1").style.backgroundColor = 'rgb('+ 
  Math.floor(Math.random() * 255) + 1 + ',' + Math.floor(Math.random() * 255) + 1 
  +',' + Math.floor(Math.random() * 255) + 1 +')';
}

When I put brackets () around - ( Math.floor(Math.random() * 255) + 1 ) -, it works much better.

Why is this so?

Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
Jason Kent
  • 11
  • 1
  • 1

4 Answers4

3

@Xufox has the right answer in the comment there. For clarity, you'll want to restructure your code a little (and let's also fix that bug where you'll never get zero for any channel due to the +1):

function colorGen() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  document.getElementById("color1").style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
AKX
  • 152,115
  • 15
  • 115
  • 172
0

When you use +1 inside a string it will generate as string and not as mathematical expression when you use () it generate as mathematical expression.

My reccomand:

Use params to random colors

function colorGen() {   
  var color1=Math.floor(Math.random() * 255) + 1;
  var color2=Math.floor(Math.random() * 255) + 1;
  var color3=Math.floor(Math.random() * 255) + 1;
  document.getElementById("color1").style.backgroundColor = 'rgb('+ color1
   + ',' +  color2
  +',' + color3 +')';
}
<button id="color1" onclick="colorGen()">click me to change color</button>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
0

When you “add” 1, it gets concatenated as a string, since you’re starting with "rgb(" +, and the result of “string + number” will be another string. Wrapping numerical expressions in parentheses makes the + operator do addition instead of concatenation.

The reason you get 255 is because the numbers you generate end up looking like this:

  11
  21
  31
  41
   …
2531
2541
2551

The backgroundColor setter caps 8-bit values (ranging from 0 to 255) at a maximum of 255 (and a minimum of 0). This means, setting element.style.backgroundColor = "rgb(10000, -10000, 128)" results in a backgroundColor of "rgb(255, 0, 128)"

So when Math.floor(Math.random() * 255) generates a number from 1 to 25, then the highest resulting number becomes 251, which is below 255. Any other value — i.e. from 26 to 255 — results in a value higher than 255, so it just becomes 255 automatically.

The parentheses make the arithmetic expression to be evaluated before the concatenation.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
0
let rgb = []
for (let i = 0; i < 3; i++) {
    let randNum = Math.floor(Math.random()*256)
    rgb.push(randNum)
}
let rgbToString = ` rgb(${rgb.join()})`
console.log(rgbToString)

An empty array named rgb is defined.

Using a loop, random numbers between 0 and 255 are generated three times, and these numbers are stored in the variable randNum.

Each generated randNum value is added to the three different indices (0, 1, and 2) of the rgb array, representing the RGB color components.

Then, the rgb array is joined using the join() method, and a string named rgbToString is created. This string will be in the "rgb(r, g, b)" format.

Finally, the rgbToString string is printed to the console using console.log().

Sinan
  • 1
  • 2