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

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>

CodePudding user response：

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>