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>