I’ve hacked together a calculator, it features one row to begin with that accepts user inputs to specify height (from dropdown), width, depth, qty (text fields).
It then performs a calculation (width+depth) * multiplier +12
The multiplier is defined by an IF based on the selected height.
I want to add 10 or more rows which are identical, and then get a grand total for all the rows’ totals added together.
Where I am stuck is how to change the drawerPrice function to handle extra rows.
I basically know nothing about js, this is a result of day 1.
<script type = "text/javascript">
//<![CDATA[
function orderTotal(){
var txtOutput3 = document.getElementById("txtOutput3");
var finalTotal = 0;
finalTotal = parseFloat(finalTotal) + parseFloat(drawerSub);
finalTotalVat = (finalTotal * 0.175) + finalTotal;
//round to two decimals
finalTotalVat = Math.round(finalTotalVat*100)/100;
txtOutput3.innerHTML = finalTotal + "<br/>+VAT: " + finalTotalVat;
}
function drawerPrice(){
var boxHeight = document.getElementById("boxHeight");
var boxWidth = document.getElementById("boxWidth");
var boxDepth = document.getElementById("boxDepth");
var boxQty = document.getElementById("boxQty");
var txtOutput = document.getElementById("txtOutput");
var txtOutput2 = document.getElementById("txtOutput2");
// get user inputted values for dimensions
var height = boxHeight.value;
var width = boxWidth.value;
var depth = boxDepth.value;
var qty = boxQty.value;
// calculate multiplier
var multiplier = 0;
if (height == 77) {
multiplier = 0.018;
}
else
if (height == 102) {
multiplier = 0.018;
}
else
if (height == 127) {
multiplier = 0.022;
}
else
if (height == 152) {
multiplier = 0.026;
}
else
if (height == 177) {
multiplier = 0.038;
}
else
if (height == 202) {
multiplier = 0.045;
}
// unit drawer cost
var drawerCost = (parseFloat(width) + parseFloat(depth)) * parseFloat(multiplier) + 12;
//round to two decimals
drawerCost = Math.round(drawerCost * 100) / 100;
// multiply for quantity
drawerSub = drawerCost * parseFloat(qty);
// Lastly convert to currency format (fixed 2 decimal places length) - gives results as STRING
drawerCost = drawerCost.toFixed(2);
drawerSub = drawerSub.toFixed(2);
// output values
txtOutput.innerHTML = drawerCost;
txtOutput2.innerHTML = drawerSub;
}
//]]>
</script>
The HTML is:
<form action = "">
<fieldset style="background-color:#cccccc; width:475px; border:0; margin:0;">
<table width="100%" border="0">
<tr>
<td align="center"><b>Height</b></td>
<td align="center"><b>Width</b></td>
<td align="center"><b>Depth</b></td>
<td align="center"><b>Qty</b></td>
<td align="center"><b>Calc</b></td>
<td align="center"><b>Cost</b></td>
<td align="center"><b>Subtotal</b></td>
</tr>
<tr>
<td align="center">
<select id = "boxHeight">
<option value = "77">77mm</option>
<option value = "102">102mm</option>
<option value = "127">127mm</option>
<option value = "152">152mm</option>
<option value = "177">177mm</option>
<option value = "202">202mm</option>
</select>
</td>
<td align="center"><input type = "text" id = "boxWidth" size="5" /></td>
<td align="center"><input type = "text" id = "boxDepth" size="5" /></td>
<td align="center"><input type = "text" id = "boxQty" size="2" /></td>
<td align="center"><input type = "button" value = "Cost" onclick = "drawerPrice()"/></td>
<td align="right"><span id = "txtOutput"></span></td>
<td align="right"><span id = "txtOutput2"></span></td>
</tr>
<tr>
<td colspan="7" align="right"><hr/><input type = "button" value = "Total" onclick = "orderTotal()"/><br/>
<span id = "txtOutput3"></span></td>
</tr>
</table>
</fieldset>
</form>