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>Advertisement
Answer
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>