snb232 0 Posted July 8, 2017 Report Share Posted July 8, 2017 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; Quote Link to post Share on other sites
David John 1 Posted July 10, 2017 Report Share Posted July 10, 2017 Give this a try (I am certainly no accountant, so please double-check to make sure this is how pay is deducted). And I intentionally left off overtime pay (unaware of the rate) as well as first name, last name, and net pay, but you probably get the idea. paycheck.html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>PayCheck</title> <!--[if lt IE 9]> <script src="http://html5shiv.goo...5.js"></script> <![endif]--> <script src="forum.js"></script> </head> <body> <!-- PayCheck.html --> <form action="" method="post" id="theForm"> <fieldset> <p>Use this form to calculate the Regular Pay. Overtime Pay. Gross Pay, and Net Pay for an employee.</p> <div> <label for="quantity">Regular Hours Worked</label> <input type="number" name="hours" id="hours" value="1" min="1" required> </div> <div> <label for="price">Hourly Rate</label> <input type="text" name="rate" id="rate" value="1.00" required> </div> <div> <label for="FICAtax">FICA Tax Rate (%)</label> <input type="text" name="FICAtax" id="FICAtax" value="0.0" required> </div> <div> <label for="statetax">State Tax (%)</label> <input type="text" name="statetax" id="statetax" value="0.00" required> </div> <div> <label for="fedtax">Federal Tax (%)</label> <input type="text" name="fedtax" id="fedtax" value="0.00" required> </div> <div> <label for="total">Total</label><input type="text" name="total" id="total" value="0.00"> </div> <div> <input type="submit" value="Calculate" id="submit"> </div> </fieldset> </form></body> </html> forum.js // Function called when the form is submitted. // Function performs the calculation and returns false. window.onload = init; function init() { 'use strict'; document.getElementById('theForm').onsubmit = calculate; } // End of init() function. function calculate() { 'use strict'; //create a variable to store the total var total; //create a variable to get the value of the hours var hours = document.getElementById('hours').value; //create a variable to get the value of rate var rate = document.getElementById('rate').value; //create a variable to get the value of FICA tax var FICAtax = document.getElementById('FICAtax').value; //create a variable to get the state tax var statetax = document.getElementById('statetax').value; //create a variable to get the federal tax var fedtax = document.getElementById('fedtax').value; //total is equal to hours * rate total = hours * rate; //i.e. if the tax rate is 8.25%, divide 8.25/100 to get .0825 FICAtax /= 100; statetax /= 100; fedtax /= 100; total = (hours*rate) - (hours*rate*FICAtax) - (hours*rate*statetax) - (hours*rate*fedtax); // Format the total: total = total.toFixed(2);//a number is object (of the type "Number") and has built-in methods like toFixed(), setting digits to the right of the decimal. //display this where id="total" in the HTML document.getElementById('total').value = total; //prevent the submission of the form return false; } // End of calculate() function. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.