CODEWITHSUNDEEP
javascriptif-statement
eric22269
eric22269

Reputation: 65

Better way for al lot of if else

I have a function to change the background color depending on the value of a slider

There are 35 different colors and I now use this code for it (of course it is longer)

if (value < 25) {
    color = '#FFFFFF';
} else if (value > 25 && value < 50) {
    color = '#F8F8F8';
} else if (value > 50 && value < 75) {
    color = '#F0F0F0 ';
}

Is there a way to shorten this up?

Upvotes: 1

Views: 115

Answers (6)

emesx
emesx

Reputation: 12755

More bullet-proof version (not fully -proof though)

var colors = ['#FFFFFF','#F8F8F8','#F0F0F0'];

/* this is not that necessary */
var value = input_value || default_input_value;

var color = colors[ Math.floor(value/25) ];

Upvotes: 1

Russ Cam
Russ Cam

Reputation: 125488

You could use an array of objects that describe the color and the min and max of the range and then use a function to iterate through the array to find the color between the range.

function getColor(value) {

    var colorRanges = [
        { color : '#FFFFFF', min : 0, max : 25 },
        { color : '#F8F8F8', min : 25, max : 50 },
        { color : '#F0F0F0', min : 50, max : 75 }
    ],
    length = colorRanges.length;

    while(length--) {
        var colorRange = colorRanges[length];
        if (value >= colorRange.min && value < colorRange.max) {
            return colorRange.color;
        }
    }

    // default color
    return colorRanges[0].color;
}

With a little additional effort, you could expose a way to add new colors and ranges, have a default for the range interval, etc. If your colors and range interval are fixed however, this is probably overkill.

Upvotes: 0

mavrosxristoforos
mavrosxristoforos

Reputation: 3643

You could make it a two line statement, without arrays, by doing something similar to this:

var rgbvalue = 255-Math.floor(value/25);
var color = 'rgb('+rgbvalue+','+rgbvalue+','+rgbvalue+');';

Of course you would have to limit the value, so that the rgbvalue doesn't get smaller than 0, but I guess you can easily do that, if you know the possible values. And if you want it to get dark faster, you can multiply the result of the Math.floor operation, like this:

var rgbvalue = 255-(Math.floor(value/25)*5);

And you have the advantage that you don't have to write a huge array of shades of gray.

Upvotes: 1

the system
the system

Reputation: 9336

If you're incrementing by 25, then make an Array of colors:

var colors = ['#FFFFFF', '#F8F8F8', '#F0F0F0 ', ... ]

And then do a little math to see which index to use.

color = colors[(value - (value % 25)) / 25];

Or if you prefer:

color = colors[Math.floor(value / 25)];

Upvotes: 3

Joseph
Joseph

Reputation: 119837

Ditch the && and cascade instead

if(values > 75){
  //anything above 75 falls here
} 
else if(value > 50){
  //anything <= 75 but > 50 falls here
} 
else if(values > 25){
  //anything <= 50 but > 25 falls here
} 
else {
  //anything <= 25 falls here
}

Upvotes: 0

user1149913
user1149913

Reputation: 4523

colors = {'#FFFFFF','#F8F8F8','#F0F0F0 '}
color=colors[(int)value/25];

You may need to adjust this depending on the range of value.

Upvotes: 0

Related Questions