Astrazelle
Forum Veteran
- Joined
- Dec 6, 2020
- Posts
- 1,098
- Solutions
- 535
- Reaction
- 1,298
- Points
- 905
- Age
- 24
<!DOCTYPE html>
<html>
<head>
<title>Employee Payroll Calculator</title>
<script>
function calculateGrossPay() {
var position = document.getElementById("position").value;
var daysPresent = parseInt(document.getElementById("daysPresent").value);
var monthlyBasicSalary = getMonthlyBasicSalary(position);
var dailyRate = monthlyBasicSalary / 26;
var grossPay = dailyRate * daysPresent;
document.getElementById("grossPay").value = grossPay.toFixed(2);
}
function calculateTotalDeductions() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
var tax = 0.1 * grossPay;
var sss = 0.05 * grossPay;
var hdmf = 200;
var philHealth = 100;
var totalDeductions = tax + sss + hdmf + philHealth;
document.getElementById("totalDeductions").value = totalDeductions.toFixed(2);
}
function calculateNetPay() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
var totalDeductions = parseFloat(document.getElementById("totalDeductions").value);
var netPay = grossPay - totalDeductions;
document.getElementById("netPay").value = netPay.toFixed(2);
}
function getMonthlyBasicSalary(position) {
switch (position) {
case "Associate Professor":
return 30000;
case "Assistant Professor":
return 25000;
case "Instructor 7":
return 18000;
case "Instructor 6":
return 16000;
case "Instructor 5":
return 14000;
case "Instructor 4":
return 12000;
case "Instructor 3":
return 10000;
case "Instructor 2":
return 8000;
case "Instructor 1":
return 6000;
default:
return 0;
}
}
</script>
</head>
<body>
<h1>Employee Payroll Calculator</h1>
<label for="position">Position:</label>
<select id="position">
<option value="Associate Professor">Associate Professor</option>
<option value="Assistant Professor">Assistant Professor</option>
<option value="Instructor 7">Instructor 7</option>
<option value="Instructor 6">Instructor 6</option>
<option value="Instructor 5">Instructor 5</option>
<option value="Instructor 4">Instructor 4</option>
<option value="Instructor 3">Instructor 3</option>
<option value="Instructor 2">Instructor 2</option>
<option value="Instructor 1">Instructor 1</option>
</select><br><br>
<label for="daysPresent">Number of Days Present:</label>
<input type="number" id="daysPresent"><br><br>
<button onclick="calculateGrossPay()">Calculate Gross Pay</button><br><br>
<label for="grossPay">Gross Pay:</label>
<input type="text" id="grossPay" readonly><br><br>
<button onclick="calculateTotalDeductions()">Calculate Total Deductions</button><br><br>
<label for="totalDeductions">Total Deductions:</label>
<input type="text" id="totalDeductions" readonly><br><br>
<button onclick="calculateNetPay()">Calculate Net Pay</button><br><br>
<label for="netPay">Net Pay:</label>
<input type="text" id="netPay" readonly><br><br>
</body>
</html>
calculateGrossPay()
function calculates the gross pay by obtaining the monthly basic salary based on the selected position and multiplying it by the number of days present. The result is then displayed in the "Gross Pay" input field.calculateTotalDeductions()
function calculates the total deductions by calculating the tax, SSS, HDMF, and PhilHealth contributions based on the gross pay. The individual deductions are then summed up and displayed in the "Total Deductions" input field.calculateNetPay()
function calculates the net pay by subtracting the total deductions from the gross pay. The result is displayed in the "Net Pay" input field.getMonthlyBasicSalary()
function is a helper function that returns the monthly basic salary corresponding to the selected position.add a code or alert method when the result in grosspay, total deductions and netpay is NaNHere's an example of a webpage that computes the payroll of an employee based on the given specifications:
HTML:<!DOCTYPE html> <html> <head> <title>Employee Payroll Calculator</title> <script> function calculateGrossPay() { var position = document.getElementById("position").value; var daysPresent = parseInt(document.getElementById("daysPresent").value); var monthlyBasicSalary = getMonthlyBasicSalary(position); var dailyRate = monthlyBasicSalary / 26; var grossPay = dailyRate * daysPresent; document.getElementById("grossPay").value = grossPay.toFixed(2); } function calculateTotalDeductions() { var grossPay = parseFloat(document.getElementById("grossPay").value); var tax = 0.1 * grossPay; var sss = 0.05 * grossPay; var hdmf = 200; var philHealth = 100; var totalDeductions = tax + sss + hdmf + philHealth; document.getElementById("totalDeductions").value = totalDeductions.toFixed(2); } function calculateNetPay() { var grossPay = parseFloat(document.getElementById("grossPay").value); var totalDeductions = parseFloat(document.getElementById("totalDeductions").value); var netPay = grossPay - totalDeductions; document.getElementById("netPay").value = netPay.toFixed(2); } function getMonthlyBasicSalary(position) { switch (position) { case "Associate Professor": return 30000; case "Assistant Professor": return 25000; case "Instructor 7": return 18000; case "Instructor 6": return 16000; case "Instructor 5": return 14000; case "Instructor 4": return 12000; case "Instructor 3": return 10000; case "Instructor 2": return 8000; case "Instructor 1": return 6000; default: return 0; } } </script> </head> <body> <h1>Employee Payroll Calculator</h1> <label for="position">Position:</label> <select id="position"> <option value="Associate Professor">Associate Professor</option> <option value="Assistant Professor">Assistant Professor</option> <option value="Instructor 7">Instructor 7</option> <option value="Instructor 6">Instructor 6</option> <option value="Instructor 5">Instructor 5</option> <option value="Instructor 4">Instructor 4</option> <option value="Instructor 3">Instructor 3</option> <option value="Instructor 2">Instructor 2</option> <option value="Instructor 1">Instructor 1</option> </select><br><br> <label for="daysPresent">Number of Days Present:</label> <input type="number" id="daysPresent"><br><br> <button onclick="calculateGrossPay()">Calculate Gross Pay</button><br><br> <label for="grossPay">Gross Pay:</label> <input type="text" id="grossPay" readonly><br><br> <button onclick="calculateTotalDeductions()">Calculate Total Deductions</button><br><br> <label for="totalDeductions">Total Deductions:</label> <input type="text" id="totalDeductions" readonly><br><br> <button onclick="calculateNetPay()">Calculate Net Pay</button><br><br> <label for="netPay">Net Pay:</label> <input type="text" id="netPay" readonly><br><br> </body> </html>
In this webpage, the employee selects their position from a dropdown menu and enters the number of days they were present. Upon clicking the respective buttons, the gross pay, total deductions, and net pay are calculated and displayed in the appropriate input fields.
ThecalculateGrossPay()
function calculates the gross pay by obtaining the monthly basic salary based on the selected position and multiplying it by the number of days present. The result is then displayed in the "Gross Pay" input field.
ThecalculateTotalDeductions()
function calculates the total deductions by calculating the tax, SSS, HDMF, and PhilHealth contributions based on the gross pay. The individual deductions are then summed up and displayed in the "Total Deductions" input field.
ThecalculateNetPay()
function calculates the net pay by subtracting the total deductions from the gross pay. The result is displayed in the "Net Pay" input field.
ThegetMonthlyBasicSalary()
function is a helper function that returns the monthly basic salary corresponding to the selected position.
Note that the calculations assume a 26-day work month and do not take into account overtime or other additional factors.
Certainly! You can add a check in each calculation function to see if the result isadd a code or alert method when the result in grosspay, total deductions and netpay is Nan
NaN
. If it is, you can display an alert message to notify the user that the input is invalid. Here's an updated version of the code that includes this check:add focus to daysPresent when the code runCertainly! You can add a check in each calculation function to see if the result isNaN
. If it is, you can display an alert message to notify the user that the input is invalid. Here's an updated version of the code that includes this check:
```html
<!DOCTYPE html>
<html>
<head>
<title>Employee Payroll Calculator</title>
<script>
function calculateGrossPay() {
var position = document.getElementById("position").value;
var daysPresent = parseInt(document.getElementById("daysPresent").value);
var monthlyBasicSalary = getMonthlyBasicSalary(position);
var dailyRate = monthlyBasicSalary / 26;
var grossPay = dailyRate * daysPresent;
if (isNaN(grossPay)) {
alert("Invalid input. Please enter a valid number of days.");
return;
}
document.getElementById("grossPay").value = grossPay.toFixed(2);
}
function calculateTotalDeductions() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
if (isNaN(grossPay)) {
alert("Invalid input. Please calculate Gross Pay first.");
return;
}
var tax = 0.1 * grossPay;
var sss = 0.05 * grossPay;
var hdmf = 200;
var philHealth = 100
Certainly! You can add theadd focus to daysPresent when the code run
focus
method to automatically set the focus to the "daysPresent" input field when the code runs. Here's the updated code:where is the focus method?Certainly! You can add thefocus
method to automatically set the focus to the "daysPresent" input field when the code runs. Here's the updated code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Employee Payroll Calculator</title>
<script>
function calculateGrossPay() {
var daysPresent = parseInt(document.getElementById("daysPresent").value);
var monthlyBasicSalary = getMonthlyBasicSalary(document.getElementById("position").value);
var dailyRate = monthlyBasicSalary / 26;
var grossPay = dailyRate * daysPresent;
if (isNaN(grossPay)) {
alert("Invalid input. Please enter a valid number of days.");
return;
}
document.getElementById("grossPay").value = grossPay.toFixed(2);
}
function calculateTotalDeductions() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
if (isNaN(grossPay)) {
alert("Invalid input. Please calculate Gross Pay first.");
return;
}
var tax = 0.1 * grossPay;
var sss = 0.05 * grossPay;
var hdmf = 200;
var philHealth = 100;
var totalDeductions = tax + sss + hdmf + philHealth;
document.getElementById("totalDeductions").value = totalDeductions.toFixed(2);
}
function calculateNetPay() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
var totalDeductions = parseFloat(document.getElementById("totalDeductions").value);
if (isNaN(grossPay) || isNaN(totalDeductions)) {
alert("Invalid input. Please calculate Gross Pay and Total Deductions first.");
return;
}
var netPay = grossPay - totalDeductions;
document.getElementById("netPay").value = netPay.toFixed(2);
}
function getMonthlyBasicSalary(position) {
switch (position) {
case "Associate Professor":
return 30000;
case "Assistant Professor":
return 25000;
case "Instructor 7":
return 18000;
case "Instructor 6":
return 16000;
case "Instructor 5":
return 14000;
case "Instructor 4":
return 12000;
case "Instructor 3":
return
We use cookies and similar technologies for the following purposes:
Do you accept cookies and these technologies?
We use cookies and similar technologies for the following purposes:
Do you accept cookies and these technologies?