CODEWITHSUNDEEP
javascript
krish
krish

Reputation: 95

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

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;
    }
}

Upvotes: 1

Views: 238

Answers (5)

Jscti
Jscti

Reputation: 14440

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 !== "";
}

Upvotes: 5

Nelson Teixeira
Nelson Teixeira

Reputation: 6572

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 != "";

Upvotes: 0

Scott Sauyet
Scott Sauyet

Reputation: 50797

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", "")

Upvotes: 1

ssten
ssten

Reputation: 2049

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 !== "";
}

Upvotes: 2

Shiva
Shiva

Reputation: 543

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;

Upvotes: 2

Related Questions