Jump to content
Larry Ullman's Book Forums

Recommended Posts

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]>
    <![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;

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...