Hi. I've been working on this for a while and I made a mistake someplace but I can't find my error. It's not working. Can you please help me. I think the HTML part is correct but I'm not 100% sure about the js part. I have done the validation for each part and corrected all the errors but it's still not working properly.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PayCheck</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- PayCheck.html -->
<form action="0" method="post">
<fieldset>
<p>Use this form to calculate the Regular Pay. Overtime Pay. Gross Pay, and Net Pay for an employee.</p>
<div><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" required></div>
<div><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" required></div>
<div><label for="regularHours">Regular Hours Worked (between 0 and 40)</label><input type="text" name="regularHours" id="regularHours" value="0" required></div>
<div><label for="overtimeHours">OverTime Hours Worked (between 0 and 40)</label><input type="text" name="overtimeHours" id="overtimeHours" value="0" required></div>
<div><label for="hourlyPay">Hourly Rate (between 0 and 99.99)</label><input type="text" name="hourlyPay" id="hourlyPay" value="0" required></div>
<div><label for="regularPay">Regular Pay</label><input type="text" name="regularPay" id="regularPay" value="0" required></div>
<div><label for="overtimePay">OverTime Pay</label><input type="text" name="overtimePay" id="overtimePay" value="0" required></div>
<div><label for="grossPay">Gross Pay</label><input type="text" name="grossPay" id="grossPay" value="0" required></div>
<div><label for="taxFICA">FICA Tax Rate (ex. 5.65) </label><input type="text" name="taxFICA" id="taxFICA" value="0.00" required></div>
<div><label for="taxState">State Tax Rate (ex. 5.75) </label><input type="text" name="taxState" id="taxState" value="0.00" required></div>
<div><label for="taxFederal">Federal Tax Rate (ex. 28.00) </label><input type="text" name="taxFederal" id="taxFederal" value="0.00" required></div>
<div><label for="totalTax">Total Taxes</label><input type="text" name="totalTax" id="totalTax" value="0.00"></div>
<div><label for="employeeName">Employee Name</label><input type="text" name="employeeName" id="employeeName" required></div>
<div><label for="netPay">Net Pay</label><input type="text" name="netPay" id="netPay" value="0.00" required></div>
<div><input type="Submit" value="Calculate" id="submit"></div>
</fieldset>
</form>
<script src="js/paycheck.js"></script>
</body>
</html>
JS:
function calculate() {
'use strict';
var regularPay;
var overtimePay;
var employeeName;
var grossPay;
var totalTax;
var netPay;
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var regularHours = document.getElementById('regularHours').value;
var overtimeHours = document.getElementById('overtimeHours').value;
var hourlyPay = document.getElementById('hourlyPay').value;
var taxFICA = document.getElementById('taxFICA').value;
var taxState = document.getElementById('taxState').value;
var taxFederal = document.getElementById('taxFederal').value;
regularPay = regularHours * hourlyPay;
overtimePay = overtimeHours * hourlyPay;
grossPay = regularPay + overtimePay;
totalTax = taxFICA + taxState + taxFICA;
netPay = grossPay - totalTax;
employeeName = firstName + lastName;
regularPay = regularPay.toFixed(2);
overtimePay = overtimePay.toFixed(2);
totalTax = totalTax.toFixed(2);
netPay = netPay.toFixed(2);
document.getElementById('regularPay').value = regularPay;
document.getElementById('overtimePay').value = overtimePay;
document.getElementById('employeeName').value = employeeName;
document.getElementById('grossPay').value = grossPay;
document.getElementById('totalTax').value = totalTax;
document.getElementById('netPay').value = netPay;
return false;
}
function init() {
'use strict';
document.getElementById('theForm').onsubmit = calculate;
window.onload = init;
