Subtract an integer from a calculated total

Question

I've built a script to add quantities/units and generate a total that displays sales tax.

How can I get this calculator to recognise #discount and subtract it from the total before the GST (10% sales tax) is calculated and added?

Also, is it possible to generate the total when the page loads? Instead of a user having to press the 'Generate total' button?

HTML

<ul>
<li> Item 1 (<input type="text" name="others" size="4" value="5" readonly="readonly" class="readonly_field"/> units)</li>
<li> Item 2 (<input type="text" name="others" size="4" value="1" readonly="readonly" class="readonly_field"/> units)</li>
<li> Item 3 (<input type="text" name="others" size="4" value="3" readonly="readonly" class="readonly_field"/> units)</li>
</ul>


<input type="button" value="Generate Total" onclick="total()"  /><br><br>

Discount <input type="text" id="discount" name="discount" value="500"/><br><br>

Total Units: <input type="text" id="units_total" name="units_total" readonly="readonly" /><br>
Sub Total: <input type="text" id="sub_total" name="sub_total" readonly="readonly" /><br>
Includes GST: <input type="text" id="gst_total" name="gst_total" readonly="readonly" /><br>
Total: <input type="text" id="g_total" name="g_total" readonly="readonly" />

JS

function total(){
var total_value = 0;
var all_others = document.getElementsByTagName("input");

for(var i=0; i<all_others.length; i++){
if(all_others[i].type!="text" || all_others[i].name!="others"){
    continue;
}
total_value += parseFloat(all_others[i].value);
}

document.getElementById("units_total").value = (total_value).toFixed(1);

document.getElementById("sub_total").value = ((total_value) *100).toFixed(2);

document.getElementById("g_total").value = (((total_value * 10/100) + total_value) * 100).toFixed(2);

document.getElementById("gst_total").value = ((total_value * 10/100) * 100).toFixed(2);
}

Answer 1

Firstly, to get your function to execute on window load, wrap it in a load event:

window.onload = function() {
    total();
}

Secondly, to get it to figure in discount, you just need to modify your variable a few times, but then when adding them together, make sure you parse them with .parseFloat() :

if (document.getElementById('discount').value != '') {
    var discount = document.getElementById('discount').value;
}
else {
    var discount = 0;
}
var sub_total = (((total_value) * 100).toFixed(2) - discount).toFixed(2);
var gst = ((total_value * 10 / 100) * 100).toFixed(2);

document.getElementById("sub_total").value = sub_total;

document.getElementById("gst_total").value = gst;

document.getElementById("g_total").value = (parseFloat(sub_total) + parseFloat(gst)).toFixed(2);

DEMO

Answer 2

First of all, I suggest you to perform validation and computations both server side and client side. The first ensures security while the second improves the responsiveness of the UI.

Said that, you'd better introduce several support variables and perform computation on them. You should get the value from the elements you are interested into using getElementById and store it in variables. Then you should perform computation on that variables and finally place the results in the elements you want to use to display them to the user.

To perform the operation when the page loads have a look at this .