Advanced Air Calculator

Question

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>

• konijn: I love the progress you have made.
• Jimmy P: Thank you! This one was really fun and challenging, but did not take me as long as the last project even thought it was bigger because I had a good idea of how I was going to put it all together. One thing I have learnt is that there is 100 different ways to achieve the same result when writing code.. Everyone is different and I think this has helped with getting my head around it all. Thanks again!

Answer 1

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.

1. 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.

2. 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.

3. 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.

• Jimmy P: Thank you for the feedback. I totally agree with the points you have made above. The code does feel a bit 'messy' and dependent on the values stored in the code. My next step is to clean it up and get the values from JSON. I am reading Head First HTML5 Programming now so it shouldn't be far away!Thanks Again.
• Jimmy P: Is there any resources you can recommend for me to read further in regards to the above?