Why it doesn't show the bluish in blue majority?

Question

So I was creating an app in which I would click on a button and it would generate a color with its details in JavaScript (vanilla), details are given in a <h1> tag.

One of the details is telling if the thing is red, green or blue majority. The website functions properly, but there's a bug.

When there is a blue majority, it shows red or green. How can I fix it?

//main func
document.getElementById('rand').onclick = () => {
  //randing the no.
  red = Math.round(Math.random() * 255);
  green = Math.round(Math.random() * 255);
  blue = Math.round(Math.random() * 255);


  //now, setting it up
  document.body.style.background = `rgb(${red}, ${green}, ${blue})`;
  color.textContent = `color = ${red}, ${green}, ${blue} (in rgb context)`;
  color.style.color = `rgb(${red}, ${green}, ${blue})`;
  switch (red, green, blue) {
    case red > green && blue:
      color.textContent += "(reddish)";
      break;
    case green > red && blue:
      color.textContent += "(greenish)";
      break;
    case blue > green && red:
      color.textContent += "(bluish)";
      break;
    default:
      color.textContent += "(blank)";
      break;
  }

}

<body>
  <div id="interfaceMain">
    <h1 id="color">Default</h1>
    <button id="rand">Randomise</button>
  </div>

</body>

Also this is not how you compare one value against multiple others: `red > green&&blue` -> `red > green && red > blue` — Andreas, Jul 23 '22 at 12:04

samnoon · Accepted Answer · 2022-07-23T12:47:01.357

You are not using logical AND operator properly. Also, the start and color identifiers are undefined in your code.

So, I have modified your code by replacing the button id with start to run the code. Also the logic of switch statement is replaced with if-else statement with the proper use of AND operator.

The logic behind the approach (this):

when Red: red - green > 50 && red - blue > 50 is true

When Green: green - red > 50 && green - blue > 50 is true

When Blue: blue - green > 50 && blue - red > 50 is true

Check the following example code:

//main func
const color = document.querySelector('#color');
const start = document.querySelector('#start');
start.onclick = () => {
  //randing the no.
  red = Math.round(Math.random() * 255);
  green = Math.round(Math.random() * 255);
  blue = Math.round(Math.random() * 255);


  //now, setting it up
  document.body.style.background = `rgb(${red}, ${green}, ${blue})`;
  color.textContent = `color = ${red}, ${green}, ${blue} (in rgb context)`;
  color.style.color = `white`;
 
   if(red - green > 50 && red - blue > 50){
        color.textContent += "(reddish)";
      }
      else if(green - red > 50 && green - blue > 50){
        color.textContent += "(greenish)";
      }
      else if(blue - green > 50 && blue - red > 50){
        color.textContent += "(bluish)";
      }
      else {
        color.textContent += "(blank)";
      }
  }

<body>
  <div id="interfaceMain">
    <h1 id="color">Default</h1>
    <button id="start">Randomise</button>
  </div>
  <script src="main.js"></script>
</body>

Where did you find that criteria: difference between "color A" and "color B" has to be `> 50` — Andreas, Jul 23 '22 at 12:37
_"I have modified your code by replacing the button id with start to run the code."_ - Why the usage of a non-standard behavior introduced by IE instead of `.querySelector()` like you're doing for `#color`? — Andreas, Jul 23 '22 at 12:38
The only actual problem with OPs code is the invalid comparison of multiple values. There are already multiple questions with that exact same problem hence this question should be closed as duplicate of ... or "just a typo" — Andreas, Jul 23 '22 at 12:41

Why it doesn't show the bluish in blue majority?

1 Answers1