Ternary Expression within Ternary Expression JavaScript

Question

I am setting background colors to all cells in a table. Within the table there is only numeric data. The code below works. It sets the background of numbers bigger then 10 to green and lower or equal to 10 to red.

.css({'background-color': value > 10 ? 'green' : 'red'})

But when to want set three different colors as background I do not know how to put it in JavaScript properly. I want a ternary expression within a ternary expression. The code below should be close to the solution. I want to set the background of numbers bigger then 10 to green and lower then 5 to red. The numbers between 5 and 10 should be getting an orange background.

.css({'background-color': value > 10 ? 'green' : 'background-color' : value < 5 ? 'red' : 'orange'})

What is wrong with the code?

Why do you repeat {'background-color':…} in the inner ternary expression? Don’t do that. — Sebastian Simon
– Sebastian Simon, Commented Jul 4, 2016 at 11:46
The right term is ternary operator. Unlike if-else statements the ternary operator is an expression, which can be used inside function argument lists or object/array literals. — user6445533
– user6445533, Commented Jul 4, 2016 at 11:56

Wikiti · Accepted Answer · 2016-07-04 11:50:15Z

3

Always use parenthesis if you have nested inline if:

.css({'background-color': (value > 10 ? 'green' : (value < 5 ? 'red' : 'orange'))})

You should refactor your code into another function to avoid if-else hell, and keep your code cleaner:

function valueToColor(value) {
  if(value > 10) return 'green';
  if(value >= 5) return 'orange';
  return 'red';
  // equivalent to: return (value > 10 ? 'green' : (value < 5 ? 'red' : 'orange'))
}

// ...

.css({'background-color': valueToColor(value)})

edited Jul 4, 2016 at 11:50

answered Jul 4, 2016 at 11:47

Wikiti

1,63613 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tân Over a year ago

inline please :)

Marcos Pérez Gude · Accepted Answer · 2016-07-04 11:47:51Z

0

My suggestion is to pull out that code with a variable. It does not work because you are not grouping the ternary conditional statements and the repeated {background-color} key.

This works:

var variable = (value >10 ? 'green' : (value <5 ? 'red' :'orange' ));
.css({'background-color': variable})

Try it:

function alertit(value) {
    var variable = (value >10 ? 'green' : (value <5 ? 'red' :'orange' ));
    alert(variable);
}

alertit(document.getElementsByTagName('input')[0].value)

Change value: <input type="text" value="3" onchange="alertit(this.value)">

answered Jul 4, 2016 at 11:47

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Collectives™ on Stack Overflow

Ternary Expression within Ternary Expression JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related