How can we use the ternary operator with multiple condition in JavaScript?

Question

The below piece of code working but to simplify the code, how can we use the ternary operator ?

function fnOnChangeType() {

    if (document.RequestHistoryForm.strMessageType.value=="All") {
        document.getElementById("selectMessageView").disabled=false;
    } else {
        document.getElementById("selectMessageView").disabled=true;
    }
}

function fnOnChangeView() {
    if (document.RequestHistoryForm.strMessageView.value=="") {
        document.getElementById("selectMessageType").disabled=false;
    } else {
        document.getElementById("selectMessageType").disabled=true;
    }
}

Daan van Hulst · Accepted Answer · 2018-12-18 15:43:59Z

5

No need of a ternary here :

function fnOnChangeType() { 
    document.getElementById("selectMessageView").disabled = document.RequestHistoryForm.strMessageType.value !== "All";
}

function fnOnChangeView() {
    document.getElementById("selectMessageType").disabled = document.RequestHistoryForm.strMessageView.value !== "";
}

edited Dec 18, 2018 at 15:43

Daan van Hulst

1,43615 silver badges33 bronze badges

answered Dec 18, 2018 at 15:22

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

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

Comments

Shiva · Accepted Answer · 2018-12-18 15:24:57Z

2

Syntax for ternary operation in JS :

 var statement = expression1 ? value1 : value2 ; 
    // If expression is true,then return value1, 
    // otherwise return value2;

Try :

document.getElementById("selectMessageView").disabled = document.RequestHistoryForm.strMessageType.value=="All" ? false : true;

answered Dec 18, 2018 at 15:24

Shiva

5531 gold badge6 silver badges21 bronze badges

2 Comments

Sleepy Panda Over a year ago

And shorter: document.getElementById("selectMessageView").disabled = !document.RequestHistoryForm.strMessageType.value == "All"; OR document.getElementById("selectMessageView").disabled = document.RequestHistoryForm.strMessageType.value != "All";

Shiva Over a year ago

@SleepyPanda : Absolutely. This is a short and good solution. Since the question explicitly mentioned about ternary operator , I provided a solution with ternary operation

ssten · Accepted Answer · 2018-12-18 15:26:55Z

2

I think you can shortened it by doing this;

function fnOnChangeType() {
    document.getElementById("selectMessageView").disabled = document.RequestHistoryForm.strMessageType.value !== "All";
}
function fnOnChangeView() {
    document.getElementById("selectMessageType").disabled = document.RequestHistoryForm.strMessageView.value !== "";
}

edited Dec 18, 2018 at 15:26

answered Dec 18, 2018 at 15:23

ssten

2,0581 gold badge19 silver badges31 bronze badges

2 Comments

fizzydrinks Over a year ago

Instead of negating an equality operation, you can just use an inequality one i.e. !==

Jscti Over a year ago

yeah or you can copy paste my answer now :D

Scott Sauyet · Accepted Answer · 2018-12-18 15:38:48Z

1

Another approach, which I probably wouldn't use for only two sets like this, but would if there are three or more, is to write a generic version to reuse:

function enableFieldOnValue(fieldToEnable, testField, value) {
  document.getElementById(fieldToEnable).disabled = 
    document.RequestHistoryForm[testField].value == value
}

enableFieldOnValue("selectMessageView", "strMessageType", "All")
enableFieldOnValue("selectMessageType", "strMessageView", "")

answered Dec 18, 2018 at 15:38

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Comments

Nelson Teixeira · Accepted Answer · 2018-12-18 15:42:21Z

I think the best you can get is this:

fnOnChangeType = ()=>
    document.getElementById("selectMessageView").disabled = 
        document.RequestHistoryForm.strMessageType.value != "All"
fnOnChangeView = ()=>
    document.getElementById("selectMessageType").disabled =    
        document.RequestHistoryForm.strMessageView.value != ""

The use of the ternary operator would be worst in this case, because you would only lengthen the function with an unecessary ? false : true suffix, when if you just invert the condition you can simplify the line. Take a look:

fnOnChangeType = ()=>
    document.getElementById("selectMessageView").disabled = 
        (document.RequestHistoryForm.strMessageType.value == "All" ? false : true;
fnOnChangeView = ()=>
    document.getElementById("selectMessageType").disabled =    
        document.RequestHistoryForm.strMessageView.value == "" ? false : true;

You make it more readable if you put the objects in variables:

var select = document.getElementById("selectMessageView"),
    requestHistoryForm = document.RequestHistoryForm;

fnOnChangeType = ()=> select.disabled = requestHistoryForm.strMessageType.value != "All";
fnOnChangeView = ()=> select.disabled = requestHistoryForm.strMessageView.value != "";

Collectives™ on Stack Overflow

How can we use the ternary operator with multiple condition in JavaScript?

5 Answers 5

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related