I have expanded a lot on my last project and had a lot of fun doing it. It was great to build out all the code. I am new to JS so these types of projects are really helping me learn. Please be honest about where I can improve the clean the code. I learnt about the helper functions after I posted here last time and love them! (Ignore the formatting as I had to remove the CSS code to fit it in the post)I would like to know how I could simplify this code. I know that my next step is using JSON to parse the required data. I am about to start the Head First HTML5 book where it goes into some depth about JSON and JavaScript.I was thinking that there could be ways to simplify the code using this. I was also thinking of using an onChange() event for the 'Model Selection' so that when the model is selected, it automatically calculates the 'Model Dropper Capacity'  How would I do this?var rooms = 13;var totalHouseM3 = 0;var models = [ modelFinder(D095 , 5 , 266 , 288 , 200 , 160 , 123, 45 ), modelFinder(D125 , 7 , 350 , 300 , 263 , 210 , 161, 48 ), modelFinder(D160 , 8 , 448 , 384 , 336 , 269 , 207, 56 ), modelFinder(D195 , 9 , 546 , 468 , 410 , 328 , 252, 64 ), modelFinder(D230 , 10 , 644 , 552 , 483 , 386 , 297, 72 ), modelFinder(D255 , 11 , 714 , 612 , 535 , 428 , 330, 72), modelFinder(D500 , 18 , 1400 , 1200 , 1050 , 840 , 645, 128 ), modelFinder(C125 , 7 , 350 , 300 , 263 , 210 , 161, 48 ), modelFinder(C160 , 8 , 448 , 384 , 336 , 269 , 207, 56 ), modelFinder(C205 , 10 , 574 , 492 , 430 , 344 , 265, 66 ), modelFinder(C240 , 11 , 672 , 576 , 504 , 406 , 310, 72) ]; var droppers = [ dropperFinder( 0 , 0) , dropperFinder( 350 , 10 ) , dropperFinder( 400 , 13 ) , dropperFinder( 450 , 16 ) , dropperFinder( 500 , 20 ) , dropperFinder( 550 , 24 ) ]; var outletSizes = [ ductFinder(  , ) , ductFinder( 300 x 300 (300mm) , 300 ) , ductFinder( 400 x 400 (350mm) , 350 ) , ductFinder( 400 x 400 (400mm) , 400 ) , ductFinder( 600 x 400 (450mm) , 450 ) , ductFinder( 600 x 400 (500mm) , 500 )  ];var locations = [ locationFinder(Canberra,30,1), locationFinder(Hobart,30,1), locationFinder(Albany,30,1), locationFinder(Port Augusta,30,1), locationFinder(Mt Gambier,30,1), locationFinder(Perth,35,2), locationFinder(Broken Hill,35,2), locationFinder(Bendigo,35,2), locationFinder(Adelaide,35,2), locationFinder(Melbourne,35,2), locationFinder(Geraldton,35,2), locationFinder(Dubbo,35,2), locationFinder(Kalgoorlie,35,2), locationFinder(Moree,35,2), locationFinder(Bourke,35,2), locationFinder(Mandurah,35,2), locationFinder(Parkes,35,2), locationFinder(Port Pirie,35,2), locationFinder(Echuca,35,2), locationFinder(Forbes,35,2), locationFinder(Toowoomba,40,3), locationFinder(Alice Springs,40,3), locationFinder(Mt Isa,40,3), locationFinder(Woomera,40,3), locationFinder(Blackall,40,3), locationFinder(Longreach,40,3), locationFinder(Charleville,40,3), locationFinder(Dalby,40,3), locationFinder(Roma,40,3), locationFinder(Cunnamulla,40,3), locationFinder(Charters Towers,40,3), locationFinder(Emerald,40,3), locationFinder(Goondiwindi,40,3), locationFinder(Brisbane,50,4), locationFinder(Sydney,50,4), locationFinder(Newcastle,50,4), locationFinder(Woolongong,50,4), locationFinder(Coffs Harbour,50,4), locationFinder(Nambour,50,4), locationFinder(Townsville,65,5), locationFinder(Cairns,65,5), locationFinder(Mackay,65,5), locationFinder(Rockhampton,65,5), locationFinder(Darwin,65,5), locationFinder(Carnavon,65,5), locationFinder(Port Hedland,65,5), locationFinder(Brooke,65,5)  ];function loadedPage() {// Executes when the page loads for the first time// Replaces Dropdown Menus with Duct Sizes for ( var i = 0 ; i < rooms ; i++ ) {  replaceWithDropdownOutletSize( R + [i] + OutletSize , outletSizes); } // Replaces Location with Locations Dropdown  replaceWithDropdownLocation( location , locations);} function startCalculate() {var totalDropperCapacity = 0, dropperSides = 6;  findLocation(); calculateTotalM3(rooms, totalHouseM3); calculateDuctDia(rooms); calculateDropperDia(rooms, totalDropperCapacity, dropperSides); findUnitSpecs(totalHouseM3, getLocationValue);  return}function replaceWithDropdownOutletSize( id , valueList ){    var element = document.getElementById( id );    var dropdown = document.createElement(select),        value = element.value,        option;    dropdown.id = id;    for( var i = 0 ; i < valueList.length ; i++ ){        option = document.createElement(option);         option.text = valueList[i].size;        option.value = valueList[i].size;        if( option.value == value){          option.selected = true;                  }        dropdown.options.add(option);    }    element.parentNode.replaceChild( dropdown , element );}function replaceWithDropdownLocation( id , valueList ){    var element = document.getElementById( id );    var dropdown = document.createElement(select),        value = element.value,        option;    dropdown.id = id;    for( var i = 0 ; i < valueList.length ; i++ ){        option = document.createElement(option);         option.text = valueList[i].location;        option.value = valueList[i].location;        if( option.value == value){          option.selected = true;                  }        dropdown.options.add(option);    }    element.parentNode.replaceChild( dropdown , element );}function replaceWithDropdownModel( id , valueList ){    var element = document.getElementById( id );    var dropdown = document.createElement(select),        value = element.value,        option;    dropdown.id = id;    for( var i = 0 ; i < valueList.length ; i++ ){        option = document.createElement(option);         option.text = valueList[i];        option.value = valueList[i];        if( option.value == value){          option.selected = true;                  }        dropdown.options.add(option);    }    element.parentNode.replaceChild( dropdown , element );}function findLocation() { var getLocationFactor = document.getElementById(location).value;  for ( var i = 0 ; i < locations.length ; i++) {  if (locations[i].location === getLocationFactor) {  getLocationValue = locations[i].factorNum;  }  }}function calculateTotalM3(rooms, totalHouseM3) { var outlets = [  outletFinder( 0, 0, 0, 0, 0, 0 ),  outletFinder( 300, 1, 1, 1, 1, 1 ),  outletFinder( 300, 34, 30, 27, 24, 18 ),  outletFinder( 350, 48, 43, 37, 33, 24 ),  outletFinder( 400, 62, 56, 47, 42, 32 ),  outletFinder( 450, 75, 68, 58, 52, 38 ),  outletFinder( 500, 92, 84, 72, 64, 46 ),  outletFinder( 500, 1000, 1000, 1000, 1000, 1000 ), ]; for ( var i = 0; i < rooms ; i++ ) { var roomL = document.getElementById(R + [i] + L).value,  roomW = document.getElementById(R + [i] + W).value,  roomH = document.getElementById(R + [i] + H).value,  roomFactor = document.getElementById(R + [i] + Factor).value,    ductDia = document.getElementById(R + [i] + Dia),  calcM3 = Math.round((roomL * roomW * roomH) * roomFactor),    outputRoomM3 = document.getElementById(R + [i] + M3Total);  totalHouseM3 = totalHouseM3 + calcM3;    outputRoomM3.innerHTML = calcM3;      var inputHouseHeatLoad = document.getElementById(HouseHeatLoad).value,  outputHouseM3 = document.getElementById(HouseM3Total),  outputAdjHouseM3 = document.getElementById(HouseAdjustM3Total);    outputHouseM3.innerHTML = totalHouseM3 +  m3;  totalHouseM3 = totalHouseM3 * inputHouseHeatLoad;  outputAdjHouseM3.innerHTML = totalHouseM3 +  m3;    for ( var x = 0; x < outlets.length; x++) {   if (calcM3 >= outlets[x].location1 && calcM3 <= outlets[x + 1].location1 && getLocationValue === 1) {    ductDia.innerHTML = outlets[x].dia;   } else if (calcM3 >= outlets[x].location2 && calcM3 <= outlets[x + 1].location2 && getLocationValue === 2) {    ductDia.innerHTML = outlets[x].dia;   } else if (calcM3 >= outlets[x].location3 && calcM3 <= outlets[x + 1].location3 && getLocationValue === 3) {    ductDia.innerHTML = outlets[x].dia;   } else if (calcM3 >= outlets[x].location4 && calcM3 <= outlets[x + 1].location4 && getLocationValue === 4) {    ductDia.innerHTML = outlets[x].dia;   } else if (calcM3 >= outlets[x].location5 && calcM3 <= outlets[x + 1].location5 && getLocationValue === 5) {    ductDia.innerHTML = outlets[x].dia;   }     }    }}function calculateDuctDia(rooms) { for ( var i = 0; i < rooms ; i++ ) { var outletSize = document.getElementById(R + [i] + OutletSize).value; var outputDuctSize = document.getElementById(R + [i] + DuctSize); var diaResult;   for ( var x = 0; x < outletSizes.length ; x++) {   if (outletSizes[x].size == outletSize) {    diaResult = outletSizes[x].capacity;   }  }  outputDuctSize.innerHTML = diaResult;  }}function calculateDropperDia(rooms, totalDropperCapacity, dropperSides ) { for ( var i = 0; i < dropperSides ; i++ ) { var dropperSize = document.getElementById(D + [i] + Size).value,  outputDropperCapacity = document.getElementById(D + [i] + Capacity),  dropperResult;   for ( var x = 0; x < droppers.length ; x++) {   if (droppers[x].size == dropperSize) {    dropperResult = droppers[x].capacity;   }     }  outputDropperCapacity.innerHTML = dropperResult;   var dropperCapacityElement = document.getElementById(DTotalCapacity); totalDropperCapacity = totalDropperCapacity + dropperResult;  dropperCapacityElement.innerHTML = totalDropperCapacity;  } }function findUnitSpecs(totalHouseM3, getLocationValue) { unitArray = [];  for ( var x = 0 ; x < models.length; x++) {  if (totalHouseM3 <= models[x].capacity1 && getLocationValue === 1) {  unitArray.push(models[x].model);  } else if (totalHouseM3 <= models[x].capacity2 && getLocationValue === 2) {  unitArray.push(models[x].model);  } else if (totalHouseM3 <= models[x].capacity3 && getLocationValue === 3) {  unitArray.push(models[x].model);  }  else if (totalHouseM3 <= models[x].capacity4 && getLocationValue === 4) {  unitArray.push(models[x].model);  }  else if (totalHouseM3 <= models[x].capacity5 && getLocationValue === 5) {  unitArray.push(models[x].model);  }  replaceWithDropdownModel( model , unitArray); }  return [ unitArray ]; }function finalUnitCalc() {   var selectedUnit = document.getElementById(model).value,  dropperCapacityUnit = document.getElementById(dropperCapacityUnit);  for ( var i = 0 ; i < models.length ; i++) {   if (selectedUnit === models[i].model) {   dropperCapacityUnit.innerHTML = models[i].dropperSize;   } }}function locationFinder(location , nominalAir, factorNum) { return { location: location, nominalAir: nominalAir, factorNum: factorNum };}function ductFinder(size, capacity) { return { size: size, capacity: capacity };}function dropperFinder(size, capacity) { return { size: size, capacity: capacity };}function modelFinder(model, outlets, capacity1, capacity2, capacity3, capacity4, capacity5, dropperSize) { return { model: model, outlets: outlets, capacity1: capacity1, capacity2: capacity2, capacity3: capacity3, capacity4: capacity4, capacity5: capacity5, dropperSize: dropperSize };}function outletFinder(dia, location1, location2, location3, location4, location5) { return { dia: dia, location1: location1, location2: location2, location3: location3, location4: location4, location5: location5 };}window.onload = loadedPage;<!DOCTYPE html><head><title>Air Calculator</title><link rel=stylesheet type=text/css href=style.css><script src=air.js type=text/javascript></script></head><body><form><table class=tg><tr><td class=tg2><h1> Airflow Calculator </h1>Location: <input id=location type=text name=location><br/><br/></td><td class=tg2><h1>Dropper Duct Calculator</h1></td></tr><tr><td class=tg2><table class=tg>  <tr>    <th class=tg-031e>Room Identity</th>    <th class=tg-031e>L</th>    <th class=tg-031e>W</th>    <th class=tg-031e>H</th>    <th class=tg-031e>Extra Room Factor</th>    <th class=tg-031e>Total Room m3</th> <th class=tg-031e>Suggested Dia</th>    <th class=tg-031e>Room Outlet Size</th>    <th class=tg-031e>Room Duct Diameter</th>  </tr>  <tr>    <td class=tg-031e><input id=R0Name type=text name=R0C1></td>    <td class=tg-031e><input id=R0L type=number name=R0L class=smallInput></td>    <td class=tg-031e><input id=R0W type=number name=R0W class=smallInput></td>    <td class=tg-031e><input id=R0H type=number name=R0H class=smallInput></td>    <td class=tg-031e><input id=R0Factor value=1.0 step=0.1 min=1 max=1.3 class=factors type=number name=R0Factor></td>    <td class=tg-031e><output id=R0M3Total name=R0M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R0Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R0OutletSize type=text name=R0OutletSize></td>    <td class=tg-031e><output id=R0DuctSize name=R0DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R1Name type=text name=R1C1></td>    <td class=tg-031e><input id=R1L type=number name=R1L class=smallInput></td>    <td class=tg-031e><input id=R1W type=number name=R1W class=smallInput></td>    <td class=tg-031e><input id=R1H type=number name=R1H class=smallInput></td>    <td class=tg-031e><input id=R1Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R1Factor></td>    <td class=tg-031e><output id=R1M3Total name=R1M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R1Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R1OutletSize type=text name=R1OutletSize></td>    <td class=tg-031e><output id=R1DuctSize name=R1DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R2Name type=text name=R2C1></td>    <td class=tg-031e><input id=R2L type=number name=R2L class=smallInput></td>    <td class=tg-031e><input id=R2W type=number name=R2W class=smallInput></td>    <td class=tg-031e><input id=R2H type=number name=R2H class=smallInput></td>    <td class=tg-031e><input id=R2Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R2Factor></td>    <td class=tg-031e><output id=R2M3Total name=R2M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R2Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R2OutletSize type=text name=R2OutletSize></td>    <td class=tg-031e><output id=R2DuctSize name=R2DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R3Name type=text name=R3C1></td>    <td class=tg-031e><input id=R3L type=number name=R3L class=smallInput></td>    <td class=tg-031e><input id=R3W type=number name=R3W class=smallInput></td>    <td class=tg-031e><input id=R3H type=number name=R3H class=smallInput></td>    <td class=tg-031e><input id=R3Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R3Factor></td>    <td class=tg-031e><output id=R3M3Total name=R3M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R3Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R3OutletSize type=text name=R3OutletSize></td>    <td class=tg-031e><output id=R3DuctSize name=R3DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R4Name type=text name=R4C1></td>    <td class=tg-031e><input id=R4L type=number name=R4L class=smallInput></td>    <td class=tg-031e><input id=R4W type=number name=R4W class=smallInput></td>    <td class=tg-031e><input id=R4H type=number name=R4H class=smallInput></td>    <td class=tg-031e><input id=R4Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R4Factor></td>    <td class=tg-031e><output id=R4M3Total name=R4M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R4Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R4OutletSize type=text name=R4OutletSize></td>    <td class=tg-031e><output id=R4DuctSize name=R4DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R5Name type=text name=R5C1></td>    <td class=tg-031e><input id=R5L type=number name=R5L class=smallInput></td>    <td class=tg-031e><input id=R5W type=number name=R5W class=smallInput></td>    <td class=tg-031e><input id=R5H type=number name=R5H class=smallInput></td>    <td class=tg-031e><input id=R5Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R5Factor></td>    <td class=tg-031e><output id=R5M3Total name=R5M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R5Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R5OutletSize type=text name=R5OutletSize></td>    <td class=tg-031e><output id=R5DuctSize name=R5DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R6Name type=text name=R6C1></td>    <td class=tg-031e><input id=R6L type=number name=R6L class=smallInput></td>    <td class=tg-031e><input id=R6W type=number name=R6W class=smallInput></td>    <td class=tg-031e><input id=R6H type=number name=R6H class=smallInput></td>    <td class=tg-031e><input id=R6Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R6Factor></td>    <td class=tg-031e><output id=R6M3Total name=R6M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R6Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R6OutletSize type=text name=R6OutletSize></td>    <td class=tg-031e><output id=R6DuctSize name=R6DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R7Name type=text name=R7C1></td>    <td class=tg-031e><input id=R7L type=number name=R7L class=smallInput></td>    <td class=tg-031e><input id=R7W type=number name=R7W class=smallInput></td>    <td class=tg-031e><input id=R7H type=number name=R7H class=smallInput></td>    <td class=tg-031e><input id=R7Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R7Factor></td>    <td class=tg-031e><output id=R7M3Total name=R7M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R7Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R7OutletSize type=text name=R7OutletSize></td>    <td class=tg-031e><output id=R7DuctSize name=R7DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R8Name type=text name=R8C1></td>    <td class=tg-031e><input id=R8L type=number name=R8L class=smallInput></td>    <td class=tg-031e><input id=R8W type=number name=R8W class=smallInput></td>    <td class=tg-031e><input id=R8H type=number name=R8H class=smallInput></td>    <td class=tg-031e><input id=R8Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R8Factor></td>    <td class=tg-031e><output id=R8M3Total name=R8M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R8Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R8OutletSize type=text name=R8OutletSize></td>    <td class=tg-031e><output id=R8DuctSize name=R8DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R9Name type=text name=R9C1></td>    <td class=tg-031e><input id=R9L type=number name=R9L class=smallInput></td>    <td class=tg-031e><input id=R9W type=number name=R9W class=smallInput></td>    <td class=tg-031e><input id=R9H type=number name=R9H class=smallInput></td>    <td class=tg-031e><input id=R9Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R9Factor></td>    <td class=tg-031e><output id=R9M3Total name=R9M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R9Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R9OutletSize type=text name=R9OutletSize></td>    <td class=tg-031e><output id=R9DuctSize name=R9DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R10Name type=text name=R10C1></td>    <td class=tg-031e><input id=R10L type=number name=R10L class=smallInput></td>    <td class=tg-031e><input id=R10W type=number name=R10W class=smallInput></td>    <td class=tg-031e><input id=R10H type=number name=R10H class=smallInput></td>    <td class=tg-031e><input id=R10Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R10Factor></td>    <td class=tg-031e><output id=R10M3Total name=R10M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R10Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R10OutletSize type=text name=R10OutletSize></td>    <td class=tg-031e><output id=R10DuctSize name=R10DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R11Name type=text name=R11C1></td>    <td class=tg-031e><input id=R11L type=number name=R11L class=smallInput></td>    <td class=tg-031e><input id=R11W type=number name=R11W class=smallInput></td>    <td class=tg-031e><input id=R11H type=number name=R11H class=smallInput></td>    <td class=tg-031e><input id=R11Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R11Factor></td>    <td class=tg-031e><output id=R11M3Total name=R11M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R11Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R11OutletSize type=text name=R11OutletSize></td>    <td class=tg-031e><output id=R11DuctSize name=R11DuctSize></output></td>  </tr>  <tr>    <td class=tg-031e><input id=R12Name type=text name=R12C1></td>    <td class=tg-031e><input id=R12L type=number name=R12L class=smallInput></td>    <td class=tg-031e><input id=R12W type=number name=R12W class=smallInput></td>    <td class=tg-031e><input id=R12H type=number name=R12H class=smallInput></td>    <td class=tg-031e><input id=R12Factor value=1.0 step=0.1 min=1 max=1.3  class=factors type=number name=R12Factor></td>    <td class=tg-031e><output id=R12M3Total name=R12M3TotaL class=smallInput></output></td> <td class=tg-031e><output id=R12Dia name=R0Dia></output></td>    <td class=tg-031e><input id=R12OutletSize type=text name=R12OutletSize></td>    <td class=tg-031e><output id=R12DuctSize name=R12DuctSize></output></td>  </tr>  </table>  <br/>  <table class=tg>  <tr>  <td class=tg-031e>Total M3 All Rooms:</td>  <td class=tg-031e><output id=HouseM3Total name=HouseM3TotaL class=smallInput></output></td>  </tr>  <tr>  <td class=tg-031e>Extra House Heat Load:</td>  <td class=tg-031e><input id=HouseHeatLoad type=number name=HouseHeatLoad value=1.0 step=0.1 min=1 max=1.3  class=factors2></td>  </tr>  <tr>  <td class=tg-031e>Total System m3 Required:</td>  <td class=tg-031e><output id=HouseAdjustM3Total name=HouseAdjustM3TotaL class=smallInput></output></td>  </tr></table><br/></br></td>    <th class=tg2>  <table class=tg>  <tr>    <th class=tg-031e></th>    <th class=tg-031e>Dropper Duct Size</th>    <th class=tg-031e>Dropper Duct Capacity</th>  </tr>  <tr>    <td class=tg-031e>Dropper Duct Side 1</td>    <td class=tg-031e><input id=D0Size type=number name=D0Size></td>    <td class=tg-031e><output id=D0Capacity name=D0Capacity></output></td>  </tr>  <tr>    <td class=tg-031e>Dropper Duct Side 2</td>    <td class=tg-031e><input id=D1Size type=number name=D1Size></td>    <td class=tg-031e><output id=D1Capacity name=D1Capacity></output></td>  </tr>  <tr>    <td class=tg-031e>Dropper Duct Side 3</td>    <td class=tg-031e><input id=D2Size type=number name=D2Size></td>    <td class=tg-031e><output id=D2Capacity name=D2Capacity></output></td>  </tr>  <tr>    <td class=tg-031e>Dropper Duct Side 4</td>    <td class=tg-031e><input id=D3Size type=number name=D3Size></td>    <td class=tg-031e><output id=D3Capacity name=D3Capacity></output></td>  </tr>  <tr>    <td class=tg-031e>Dropper Duct Side 5</td>    <td class=tg-031e><input id=D4Size type=number name=D4Size></td>    <td class=tg-031e><output id=D4Capacity name=D4Capacity></output></td>  </tr>  <tr>    <td class=tg-031e>Dropper Duct Side 6</td>    <td class=tg-031e><input id=D5Size type=number name=D5Size></td>    <td class=tg-031e><output id=D5Capacity name=D5Capacity></output></td>  </tr>  <tr>    <td class=tg-031e colspan=2>Design Dropper Capacity</td>    <td class=tg-031e><output id=DTotalCapacity name=DTotalCapacity></output></td>  </tr>  <tr>    <td class=tg-031e colspan=2>Model Dropper Capacity</td>    <td class=tg-031e><output id=dropperCapacityUnit name=dropperCapacityUnit></output></td>  </tr>  <tr>    <td class=tg-s6z2 colspan=2>Model Selection</td>    <td class=tg-031e><input id=model name=model class=smallInput></td>  </tr></table>  <p><br/>  <input onClick=startCalculate() type=button value=1. Calculate M3, Diameter (Suggested and Actual)>  </p>  <p>    <input onClick=startCalculate() type=button value=2. Recalculate Unit Sizes>    </p>  <p>    <input onclick=finalUnitCalc() type=button value=3. Calculate Dropper Capacity>  </p>  </th>  </tr></table> <br/><br/></form><br/></body>
Advanced Air Calculator
javascript;beginner;html
Saw the previous post for this and there were a lot of code related stuff there so I thought I'd go for the architectural approach for this one.First off, seeing document.getElementById and element.innerHTML... *flies away*. Seriously, it's not that its wrong, but it isn't a maintainable way to do things. What if your IDs change? Or what if things move around? What if element somehow isn't in the page? Stuff like that. Another is the inline handlers. At some cases, they are fine. But separation of concerns tells us to separate the logic, the view and the data. You'd want to find styles in .css files, or logic in .js files, or the layout in .html files, and never in another place. It's maintainability and readability.Another problem, which we also encountered in our job a few months ago, is when state or data is on the view. It's fine in small pieces of code. But if you have multiple parts relying on multiple inputs, everything becomes haywire pretty quick. Also, if you somehow change the UI and accidentally rename an ID, you'd probably break those depending on it.As a suggestion to resolve these 3, I think you should adopt a framework. Even a simple one will do. Frameworks generally separate display, logic and data, which solves 1 and 2. As for 3, frameworks have a data layer, a single source of truth for all the data on the page. UI elements won't rely on other UI elements but rely on that data layer for data to display. You can easily swap out the UI whenever you feel like it.You could also start diving into reactive programming, where changes in one data cause automatic changes in dependent data. Think of MS Excel functions. If you have a function like =SUM(A1,A2) on the A3 cell, if you change A1's value, A3 changes automatically because of that. It's especially helpful in your application because you deal with computations.I suggest you take a look at Agility.js for a basic feel of MVC. You can ramp up and take on Backbone for more advanced concepts while retaining a somewhat similar structure.