JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="post" id="theForm">
<fieldset>
<p>Use this form to calculate your paycheck.</p>
<div><label for="hours">Hours Worked</label><input type="text" name="hours" id="hours" value="0.00"></div>
<div><label for="rate">Pay Rate</label><input type="text" name="rate" id="rate" value="0.00"></div>
<div><label for="withholding">Withholding</label><input type="text" name="withholding" id="withholding" value="0.20"></div>
<div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
<div><label for="withheld">Withheld</label><input type="text" name="withhheld" id="withheld" value="0"></div>
<div><label for="realTotal">Final Total</label><input type="text" name="realTotal" id="realTotal" value="0"></div>
<div><input type="submit" value="Calculate" id="submit"/></div>
</fieldset>
</form>
JavaScript
function calculate() {
'use strict';
var totalPay;
var withheld;
var realPay;
var hours = document.getElementById('hours').value;
var rate = document.getElementById('rate').value;
var withholding = document.getElementById('withholding').value;
totalPay = hours * rate;
withheld = totalPay * withholding;
realPay = totalPay - withheld;
document.getElementById('total').value = totalPay;
document.getElementById('withheld').value = withheld;
document.getElementById('realTotal').value = realPay;
return false;
}
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
}
init();