JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Sub-total Calculation</h1>
<form id='calcForm'>
<input type="text" id="fld" placeholder="Enter in subtotal"/>
<button type="submit" >Calculate</button><br>
<span id="sub-total"></span><br>
<span id="tax"></span><br>
<span id="total"></span><br>
</form>
JavaScript
window.addEventListener('load',function()
{
var input = document.getElementById('fld'),
subTotal = document.getElementById('sub-total'),
tax = document.getElementById('tax'),
total = document.getElementById('total'),
subTotalCalc,
toDecimal = function(num, precision)
{
precision = precision || 2;
num = +(num || 0);
return (Math.round(num*Math.pow(10,precision))/Math.pow(10,precision)).toFixed(precision);
};
document.getElementById('calcForm').addEventListener('submit',function(e)
{
e = e || window.event;
e.preventDefault();//prevent form's default behaviour
e.stopPropagation();//if submit was sent by clicking submit button, stop the event here
if (input.value === '' || input.value != +(input.value))
{
alert('Please enter valid subtotal (numeric)');
return;
}
subTotalCalc = toDecimal(input.value / 1.06);
subTotal.innerHTML = "Subtotal:" + " " + "$" + subTotalCalc;
tax.innerHTML = "Tax:" + " " + "$" + toDecimal(input.value - subTotalCalc);
total.innerHTML = input.value;
},false)
},false);