I am looking for guidance on fixing my code so the HTML form will compute the ca
ID: 3749183 • Letter: I
Question
I am looking for guidance on fixing my code so the HTML form will compute the calcualtions in the JS code. I have separated the HTML and JS code with headers. There is a screenshot of what the form should look like, located at the bottom.
HTML
Paycheck
Paycheck
First Name
Last Name
Regular Hours Worked (between 0-40)
Overtime Hours (between 0-40)
Hourly Rate (between 0 - 99.99)
Regular Pay
Overtime Pay
Gross Pay
FICA Tax Rate (Ex: 5.65)
State Tax Rate (Ex: 5.75)
Federal Tax Rate (Ex: 28.00)
Total Taxes
Employee Name
Net Pay
JS
function calculate() {
'use strict';
var netPay;
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var regHours = document.getElementById('regHours').value;
var overHours = document.getElementById('overHours').value;
var hourlyRate = document.getElementById('hourlyRate').value;
var regPay = document.getElementById('regPay').value;
var overtimePay = document.getElementById('overtimePay').value;
var grossPay = document.getElementById('grossPay').value;
var fica = document.getElementById('fica').value;
var stateRate = document.getElementById('stateRate').value;
var fedRate = document.getElementById('fedRate').value;
var totalTax = document.getElementById('totalTax').value;
var empName = document.getElementById('empName').value;
var netPay = document.getElementById('netPay').value;
//Calculates a worker's regular pay.
if(regHours > 0 && regHours < 41){
regPay = regHours * hourlyRate;
}
document.getElementById('regPay').value = '$' + regPay.toFixed(2);
else { // An error:
document.getElementById('regPay').value = 'Please enter valid values.';
}
//Calculates a worker's overtime pay.
if(overHours >= 0 && overHours < 41)
{
overtimePay = overHours * 1.5;
}
else if
{
document.getElementById('overHours').value = 'Please enter valid values.';
}
//Calculate's a worker's gross pay.
if(regPay && overtimePay){
grossPay = regPay + overtimePay;
}
else
{
document.getElementById('grossPay').value = 'That does not compute.';
}
//Calculate worker's total tax oblication.
if(fica > 0 && fice < 100){
var ficaTax = grossPay * fica;
}
else{
document.getElementById('fica').value = 'Rate must be greater than 0 and less than 100.';
}
if(stateRate > 0 && stateRate < 100){
var stateTax = grossPay * stateRate;
}
else{
document.getElementById('stateRate').value = 'Rate must be greater than 0 and less than 100.';
}
if(fedRate > 0 && fedRate < 100){
var fedTax = grossPay * fedRate;
}
else{
document.getElementById('fedRate').value = 'Rate must be greater than 0 and less than 100.';
}
totalTax = ficaTax + stateTax + fedTax;
// Calculate a worker's net pay.
netPay = grossPay - totalTax;
// Concatentate worker's first and last names.
empName = firstName + lastName;
return false;
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
'use strict';
// Add an event listener to the form:
var theForm = document.getElementById('theForm');
theForm.onsubmit = calculate;
} // End of init() function.
// Assign an event listener to the window's load event:
window.onload = init;
Explanation / Answer
The form for your solution that is HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Pay Check</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form id="theForm">
<fieldset>
<legend><h1>Paycheck</h1></legend>
<label>FirstName</label><br>
<input type="text" name="firstname" id="firstName"> <br>
<label>LastName</label> <br>
<input type="text" name="lastname" id="lastName"> <br>
<label>Regular Hours Worked(between 0-40)</label> <br>
<input type="text" name="regularhours" id="regHours"> <br>
<label>Overtime Hours Worked(between0-40)</label> <br>
<input type="text" name="overtimehours" id="overHours"> <br>
<label>Hourly Rate(between 0-99.99)</label> <br>
<input type="text" name="hourlyrates" step="0.01" id="hourlyRate"> <br>
<label>Regular Pay</label> <br>
<input type="text" name="regularpay" id="regPay"> <br>
<label>Overtime Pay</label> <br>
<input type="text" name="overtimepay" id="overtimePay"> <br>
<label>Gross Pay</label> <br>
<input type="text" name="grosspay" id="grossPay"> <br>
<label>FICA Tax Rate(Ex:5.65)</label> <br>
<input type="text" name="ficatax" step="0.01" id="fica"> <br>
<label>State Tax Rate(Ex:5.75)</label> <br>
<input type="text" name="statetax" step="0.01" id="stateRate"> <br>
<label>Federal Tax Rate(Ex:28.00)</label> <br>
<input type="text" name="federaltaxrate" step="0.01" id="fedRate"> <br>
<label>Total Taxes</label> <br>
<input type="text" name="totaltax" step="0.01" id="totalTax"> <br>
<label>Employee Name</label> <br>
<input type="text" name="employeename" id="empName"> <br>
<label>Net Pay</label> <br>
<input type="text" name="netpay" step="0.01" id="netPay"> <br>
<input type="button" value="Caluculate" id="calculate">
</fieldset>
</form>
<h1 id="result"></h1>
<p id></p>
</body>
</html>
The Javascript code is just I made few changes if you has any queries please try to comment I will respond as soon as Possible:
JS Code:
function calc() {
var netPay,ficaTax,stateTax,fedTax;
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value
var regHours = parseInt(document.getElementById('regHours').value);
var overHours = parseInt(document.getElementById('overHours').value);
var hourlyRate = parseInt(document.getElementById('hourlyRate').value);
var regPay = parseInt(document.getElementById('regPay').value);
var overtimePay = parseInt(document.getElementById('overtimePay').value);
var grossPay = document.getElementById('grossPay').value;
var fica = parseInt(document.getElementById('fica').value);
var stateRate = parseInt(document.getElementById('stateRate').value);
var fedRate = parseInt(document.getElementById('fedRate').value);
var totalTax = document.getElementById('totalTax').value;
var empName = document.getElementById('empName').value;
var netPay = document.getElementById('netPay').value;
//Calculates a worker's regular pay.
if(regHours > 0 && regHours < 41){
regPay = regHours * hourlyRate;
alert('regpay'+regPay);
}
else { // An error:
document.getElementById('regPay').value = 'Please enter valid values.';
}
//Calculates a worker's overtime pay.
if(overHours >= 0 && overHours < 41)
{
overtimePay = overHours * 1.5;
alert('overtimepay'+overtimePay);
}
else
{
document.getElementById('overHours').value = 'Please enter valid values.';
}
//Calculate's a worker's gross pay.
if(regPay && overtimePay){
grossPay = regPay + overtimePay;
alert('grossPaypay'+grossPay);
}
else
{
document.getElementById('grossPay').value = 'That does not compute.';
}
//Calculate worker's total tax oblication.
if(fica > 0 && fica < 100){
ficaTax = grossPay * (fica/100);
alert('ficaTax'+ficaTax);
}
else{
document.getElementById('fica').value = 'Rate must be greater than 0 and less than 100.';
}
if(stateRate > 0 && stateRate < 100){
var stateTax = grossPay * (stateRate/100);
alert('stateTax'+stateTax);
}
else{
document.getElementById('stateRate').value = 'Rate must be greater than 0 and less than 100.';
}
if(fedRate > 0 && fedRate < 100){
var fedTax = grossPay * (fedRate/100);
alert('fedTax'+fedTax);
}
else{
document.getElementById('fedRate').value = 'Rate must be greater than 0 and less than 100.';
}
document.getElementById('regPay').value = '$' + regPay;
document.getElementById('overtimePay').value = '$' + overtimePay;
document.getElementById('grossPay').value = '$' + grossPay;
totalTax = ficaTax + stateTax + fedTax;
document.getElementById('totalTax').value = '$' + totalTax;
alert('total Tax'+totalTax);
// Calculate a worker's net pay.
netPay = grossPay - totalTax;
document.getElementById('netPay').value = '$' + netPay;
alert('netPay'+netPay);
// Concatentate worker's first and last names.
empName = firstName + lastName;
}
The main problem in your code is Tax variable declaration and incorrect closing of calcumate function JS consider strict indentation. Hope, you got the answer it you have any queries please try to comment i will try to respond as soon as possible...
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.