javascript - What is a better way to arrange these multiple if else conditions? -
i have user input boxes influence wording of text generated when checkboxes clicked. simplification of site follows, can better illustrate 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>l>m </label> <br> <label id="_parttype151"><input id="parttype151" name="parttype" type="checkbox"> normal baby, l>n>m </label> <br> <label id="_parttype152"><input id="parttype152" name="parttype" type="checkbox"> mild ↓, n>l>m </label> <br> after inputting values in input boxes, user click checkbox top set , bottom set. generate text in text area. have working script modifies rendered text, based on series of if/else conditions input fields 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 (normal|increased)/,"leukocytes decreased").replace(/the red cells (normal|increased)/,"the red cells decreased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else if(wbcix < 3.59 && (rbcix > 4 && rbcix < 5.91)){ mytextbox.value += parttypes[chosensite.id].replace(/leukocytes (normal|increased)/,"leukocytes decreased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else if(wbcix < 3.59 && rbcix > 5.91 ){ mytextbox.value += parttypes[chosensite.id].replace(/leukocytes (normal|increased)/,"leukocytes decreased").replace(/the red cells (normal|decreased)/,"the red cells increased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else if((wbcix > 3.59 && wbcix < 11.1) && rbcix < 4 ){ mytextbox.value += parttypes[chosensite.id].replace(/the red cells (normal|increased)/,"the red cells decreased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else if((wbcix > 3.59 && wbcix < 11.1) && rbcix > 5.91 ){ mytextbox.value += parttypes[chosensite.id].replace(/the red cells (normal|decreased)/,"the red cells increased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else if(wbcix > 15.1 && rbcix < 4 ){ mytextbox.value += parttypes[chosensite.id].replace(/leukocytes (normal|decreased)/,"leukocytes increased").replace(/the red cells (normal|increased)/,"the red cells decreased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else if(wbcix > 15.1 && (rbcix > 4 && rbcix < 5.91)){ mytextbox.value += parttypes[chosensite.id].replace(/leukocytes (normal|decreased)/,"leukocytes increased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else if(wbcix > 15.1 && rbcix > 5.91 ){ mytextbox.value += parttypes[chosensite.id].replace(/leukocytes (normal|decreased)/,"leukocytes increased").replace(/the red cells (normal|decreased)/,"the red cells increased"); // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } else { mytextbox.value += parttypes[chosensite.id] + ""; // resets radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } } if (chosendiagnosis !== null){ mytextbox.value += dxlines[chosendiagnosis.id] + ""; // resets radio box values after output displayed chosendiagnosis.checked = false; // resets these variables null state chosendiagnosis = null; } }; admittedly, rather brute force way combine various patterns 2 of 3 input boxes series of if/else statements, works. if wanted include third input box however, coding tedious.
but, i'm limited i've learned far javascript - advice on how better organize or rethink if/else logic appreciated. here fiddle shows simplified version of site above if/else statements: http://jsfiddle.net/gzvu3/
here's relevant part of simplified implementation.
function describeleukocytes(basetext, wbcix) { if (wbcix < 3.59) return basetext.replace(/leukocytes (normal|increased)/, "leukocytes decreased"); else if (wbcix > 15.1) return basetext.replace(/leukocytes (normal|decreased)/, "leukocytes increased"); else return basetext; } function describerbc(basetext, rbcix) { if (rbcix < 4) return basetext.replace(/the red cells (normal|increased)/, "the red cells decreased"); else if (rbcix > 5.91) return basetext.replace(/the red cells (normal|decreased)/, "the red cells 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 radio box values after output displayed chosensite.checked = false; // resets these variables null state chosensite = null; } if (chosendiagnosis !== null) { mytextbox.value += dxlines[chosendiagnosis.id] + ""; // resets radio box values after output displayed chosendiagnosis.checked = false; // resets these variables null state chosendiagnosis = null; } } since conditions determine wbc , rbc text independent of each other, can separate these different functions , eliminate duplicated code. moving these checks functions make code more reusable , self-describing. further refactored introduce concept of numeric ranges , text placeholders, allowing specify logic declaratively set of rules instead of procedural if-statements, didn't go far. also, chosensite manipulations repeated in every condition of if/else block, moved them out of if statements eliminate duplicated code well.
see jsfiddle full code.
Comments
Post a Comment