What is a better way to arrange these multiple if else conditions?

Question

I have some user input boxes which will influence the wording of some text that is generated when some checkboxes are clicked. A simplification of the site is as follows, so I can better illustrate my problem.

HTML

WBC: <input size="6" id="WBC" name="index">
RBC: <input size="6" id="RBC" name="index">
HB: <input size="6" id="HB" name="index">
<br><br>
<label id="__partType100"><input id="partType100" name="partType" type="checkbox"> NORMAL  </label> <br>
<label id="__partType101"><input id="partType101" name="partType" type="checkbox"> NORMOCYTIC </label><br>
<label id="__partType102"><input id="partType102" name="partType" type="checkbox">  MICROCYTIC </label> <br>
<br><br>
<label id="_partType150"><input id="partType150" name="partType" type="checkbox"> NORMAL WBC, N&gt;L&gt;M </label> <br>
<label id="_partType151"><input id="partType151" name="partType" type="checkbox"> NORMAL BABY, L&gt;N&gt;M </label> <br>
<label id="_partType152"><input id="partType152" name="partType" type="checkbox"> MILD &#8595;, N&gt;L&gt;M </label> <br>

After inputting some values in the input boxes, the user will click a checkbox from the top set and the bottom set. This will generate some text in a text area. I have a working script that modifies the rendered text, based on a series of if/else conditions from the input fields as follows:

SCRIPT

function testAndFill(){
    if (chosenSite !== null){   
            // conditional arguments based on user inputs               

            var wbcIx = $('#WBC').val();
            var rbcIx = $('#RBC').val();
                if(wbcIx < 3.59 && rbcIx < 4 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|increased)/,"Leukocytes are decreased").replace(/The red cells are (normal|increased)/,"The red cells are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx < 3.59 && (rbcIx > 4 && rbcIx < 5.91)){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|increased)/,"Leukocytes are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx < 3.59 && rbcIx > 5.91 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|increased)/,"Leukocytes are decreased").replace(/The red cells are (normal|decreased)/,"The red cells are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if((wbcIx > 3.59 && wbcIx < 11.1) && rbcIx < 4 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/The red cells are (normal|increased)/,"The red cells are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if((wbcIx > 3.59 && wbcIx < 11.1) && rbcIx > 5.91 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/The red cells are (normal|decreased)/,"The red cells are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx > 15.1 && rbcIx < 4 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|decreased)/,"Leukocytes are increased").replace(/The red cells are (normal|increased)/,"The red cells are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx > 15.1 && (rbcIx > 4 && rbcIx < 5.91)){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|decreased)/,"Leukocytes are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx > 15.1 && rbcIx > 5.91 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|decreased)/,"Leukocytes are increased").replace(/The red cells are (normal|decreased)/,"The red cells are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else {
                mytextbox.value += partTypes[chosenSite.id] + "";
                       // resets the radio box values after output is displayed
                    chosenSite.checked = false;
                    // resets these variables to the null state
                   chosenSite = null;
                    }
        }       
        if (chosenDiagnosis !== null){
        mytextbox.value += dxLines[chosenDiagnosis.id] + "";
        // resets the radio box values after output is displayed
        chosenDiagnosis.checked = false;
        // resets these variables to the null state
        chosenDiagnosis = null;
        }
    };

Admittedly, this is a rather brute force way to combine the various patterns from two of the three input boxes into a series of if/else statements, but it works. If I wanted to include the third input box however, the coding would be very tedious.

But, I'm limited by what I've learned so far with javascript - so any advice on how to better organize or rethink this if/else logic would be appreciated. Here is a fiddle that shows a simplified version of my site with the above if/else statements: http://jsfiddle.net/GzVu3/

Answer 1

Here's the relevant part of a simplified implementation.

function describeLeukocytes(baseText, wbcIx) {
    if (wbcIx < 3.59)
        return baseText.replace(/Leukocytes are (normal|increased)/, "Leukocytes are decreased");
    else if (wbcIx > 15.1)
        return baseText.replace(/Leukocytes are (normal|decreased)/, "Leukocytes are increased");
    else
        return baseText;
}

function describeRbc(baseText, rbcIx) {
    if (rbcIx < 4)
        return baseText.replace(/The red cells are (normal|increased)/, "The red cells are decreased");
    else if (rbcIx > 5.91)
        return baseText.replace(/The red cells are (normal|decreased)/, "The red cells are increased");
    else
        return baseText;
}

function testAndFill() {
    if (chosenSite !== null) {
        // conditional argument based on WBC count
        var wbcIx = $('#WBC').val();
        var rbcIx = $('#RBC').val();
        var text = partTypes[chosenSite.id];
        text = describeLeukocytes(text, wbcIx);
        mytextbox.value += describeRbc(text, rbcIx);
        //  resets the radio box values after output is displayed
        chosenSite.checked = false;
        // resets these variables to the null state
        chosenSite = null;
    }
    if (chosenDiagnosis !== null) {
        mytextbox.value += dxLines[chosenDiagnosis.id] + "";
        // resets the radio box values after output is displayed
        chosenDiagnosis.checked = false;
        // resets these variables to the null state
        chosenDiagnosis = null;
    }
}

Since the conditions that determine the WBC and RBC text are independent of each other, we can separate these into different functions and eliminate duplicated code. Moving these checks into functions make your code more reusable and self-describing. This could probably be further refactored to introduce the concept of numeric ranges and text placeholders, allowing you to specify your logic declaratively as a set of rules instead of procedural if-statements, but I didn't go that far. Also, the chosenSite manipulations were repeated in every condition of the if/else block, so I moved them out of the if statements to eliminate that duplicated code as well.

See this jsfiddle for the full code.