1

I'm making a page which asks the user a question, grabs the result, grabs the variables assigned to that result and inputs them into a table. What I've done so far works perfectly, but it's not efficient and I know there's a better way to do it using arrays and possibly loops, but every iteration I've tried still results in equal to or more work. Here's what I've created (which works fine):

    function agecalc() {
      var weight;
      var HRlow;
      var HRhi;
      var RRlow;
      var RRhi;
      var SBPlow;
      var SBPhi;
      var DBPlow;
      var DBPhi;
      var age = parseFloat(document.getElementById("agechoice").value);
      if (isNaN(age)) {
        var weight = 0
      } else if (age == 0) {
        var weight = 3.5
      } else if (age == 0.5) {
        var weight = 8
      } else if (age == 8) {
        var weight = 25
      } else if (age == 9) {
        var weight = 28
      } else if (age == 10) {
        var weight = 32
      } else if (age == 11) {
        var weight = 36
      } else {
        var weight = (age + 4) * 2
      }
    
      // Observations determinant
      if (weight >= 0 && weight <= 5) {
        var HRlow = 100,
          HRhi = 160,
          RRlow = 30,
          RRhi = 50,
          SBPlow = 75,
          SBPhi = 100,
          DBPlow = 50,
          DBPhi = 70;
      } else if (weight > 5 && weight <= 9) {
        var HRlow = 80,
          HRhi = 140,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 75,
          SBPhi = 100,
          DBPlow = 50,
          DBPhi = 70;
      } else if (weight > 9 && weight <= 11) {
        var HRlow = 80,
          HRhi = 130,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 11 && weight <= 13) {
        var HRlow = 80,
          HRhi = 130,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 13 && weight <= 15) {
        var HRlow = 80,
          HRhi = 130,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 15 && weight <= 17) {
        var HRlow = 80,
          HRhi = 120,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 17 && weight <= 19) {
        var HRlow = 80,
          HRhi = 120,
          RRlow = 20,
          RRhi = 30,
          SBPlow = 80,
          SBPhi = 110,
          DBPlow = 50,
          DBPhi = 80;
      } else if (weight > 19 && weight <= 21) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 21 && weight <= 23.5) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 23.5 && weight <= 26.5) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 26.5 && weight <= 30) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 30 && weight <= 34) {
        var HRlow = 70,
          HRhi = 110,
          RRlow = 15,
          RRhi = 30,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 34 && weight <= 38) {
        var HRlow = 60,
          HRhi = 105,
          RRlow = 15,
          RRhi = 20,
          SBPlow = 85,
          SBPhi = 120,
          DBPlow = 55,
          DBPhi = 80;
      } else if (weight > 38 && weight <= 49) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      } else if (weight > 49 && weight <= 69) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      } else if (weight > 69 && weight <= 99) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      } else if (weight >= 100) {
        var HRlow = 60,
          HRhi = 100,
          RRlow = 12,
          RRhi = 20,
          SBPlow = 80,
          SBPhi = 120,
          DBPlow = 60,
          DBPhi = 80;
      }
      // Place observations into the table
      document.getElementById("HRlow").innerHTML = HRlow;
      document.getElementById("HRhi").innerHTML = HRhi;
      document.getElementById("RRlow").innerHTML = RRlow;
      document.getElementById("RRhi").innerHTML = RRhi;
      document.getElementById("SBPlow").innerHTML = SBPlow;
      document.getElementById("SBPhi").innerHTML = SBPhi;
      document.getElementById("DBPlow").innerHTML = DBPlow;
      document.getElementById("DBPhi").innerHTML = DBPhi;
    }
    <table>
    <tr>
    <td>Age</td>
    <td><select id="agechoice" onchange="agecalc()">
    <option selected="selected">
    - Select Age -
    </option>
    <option value="defaultvalue">
    </option>
    <option value="0">
    Newborn
    </option>
    <option value=".5">
    6 months
    </option>
    <option value="1">
    1 year
    </option>
    <option value="2">
    2 years
    </option>
    <option value="3">
    3 years
    </option>
    <option value="4">
    4 years
    </option>
    <option value="5">
    5 years
    </option>
    <option value="6">
    6 years
    </option>
    <option value="7">
    7 years
    </option>
    <option value="8">
    8 years
    </option>
    <option value="9">
    9 years
    </option>
    <option value="10">
    10 years
    </option>
    <option value="11">
    11 years
    </option>
    </select></td>
    </tr>
    </table>
    <table id="observations">
    <tbody>
    <tr>
    <td><strong>Lower limit</strong></td>
    <td><strong>Upper limit</strong></td>
    </tr>
    <tr>
    <td colspan="2">Heart Rate</td>
    </tr>
    <tr>
    <td id="HRlow">&nbsp;</td>
    <td id="HRhi">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">Respiratory Rate</td>
    </tr>
    <tr>
    <td id="RRlow">&nbsp;</td>
    <td id="RRhi">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">Systolic Blood Pressure</td>
    </tr>
    <tr>
    <td id="SBPlow">&nbsp;</td>
    <td id="SBPhi">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">Diastolic Blood Pressure</td>
    </tr>
    <tr>
    <td id="DBPlow">&nbsp;</td>
    <td id="DBPhi">&nbsp;</td>
    </tr>
    </tbody>
    </table>

I've thought about using arrays like this:

const HRlow = [100,80,80,80,]
const HRhi = [160,140,130,130,120]
const RRlow = [30,20,20,20]

But then wouldn't I have to, under each grouping (for example: (weight >= 0 && weight <= 5)), have to put:

document.getElementById("HRlow").innerHTML = HRlow[1];
document.getElementById("HRhi").innerHTML = HRhi[1];

etc., thus resulting in more code.

I've thought about setting the array by age group, e.g.

const obs1 = [100,160,30,50,75,100,50,70];

But then I would have to again, under each grouping, I would still be entering each iteration of document.getElementById and selecting the object. I know there's a way to do it more efficiently (maybe with loops?) I just can't put my finger on it.

Improve this question

1 Answer 1

Reset to default
1

You can define all of the possible HRlow, HRhi, etc in an array of arrays. Each subarray can correspond to one condition - eg one subarray is for weight >= 0 && weight <= 5, another is for weight > 5 && weight <= 9.

Also have an array of conditions - the ones previously referred to. Find the index of the first true condition, then use that index to look up the appropriate subarray.

Make the TDs in which you want to insert data easier to select - such as with a particular class - and then you can iterate over the identified subarray and insert into each. For example, if you give the TDs to be populated the stat class:

You can also create a mapping of ages to weights instead of the if/elses in the beginning.

const weightsByAge = { // or use a Map
    0: 3.5,
    0.5: 8,
    8: 25,
    9: 28,
    10: 32,
    11: 36
};
function agecalc() {
    const age = parseFloat(document.getElementById("agechoice").value);
    const weight = isNaN(age)
        ? 0
        : weightsByAge[weight] || (age + 4) * 2;
    const statConditions = [
        weight >= 0 && weight <= 5,
        weight > 5 && weight <= 9,
        // etc
    ];
    const statsByWeight = [
        /*           HRlow, HRhi, RRlow, RRhi, SBPlow, SBPhi, DBPlow, DBPhi
        /* 0-5    */ [100,  160,  30,    50,   75,     100,   50,     70],
        /* 5-9    */ [80,   140,  20,    30,   75,     100,   50,     70],
        // etc
    ];
    const trueIndex = statConditions.indexOf(true);
    const theseStats = statsByWeight[trueIndex];
    const tds = document.querySelectorAll('.stat');
    theseStats.forEach((stat, i) => {
        tds[i].textContent = stat;
    });
}

cutting your JS down significantly.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.