Hey everyone! I’m excited to be here. I am a coding noob; I just started learning last year and am still getting my feet wet. I really could use some help. I am attempting to create an array function to display employee info, specifically their specialization, but I’m not getting any output when I click the button on my browser. Can someone please tell me what I am doing wrong? My function is at the very bottom called findEmployeeBySpecialization
Thank you in advance for the help!
employee_details.html
Employee Management SystemEmployee Management System
<button onclick="displayEmployees()">Display Employees</button>
<button onclick="calculateTotalSalaries()">Calculate Total Salaries</button>
<button onclick="displayHREmployees()">Display HR Employees</button>
<button onclick="findEmployeeById(2)">Find Employee by ID 2</button>
<button onclick="findEmployeeBySpecialization(JavaScript)">Find by Specialization JavaScript</button>
const employees = [
{ id: 1, name: 'John Doe', age: 30, department: 'IT', salary: 50000, specialization: 'JavaScript' },
{ id: 2, name: 'Alice Smith', age: 28, department: 'HR', salary: 45000, specialization: 'Python' },
{ id: 3, name: 'Bob Johnson', age: 35, department: 'Finance', salary: 60000, specialization: 'Java' },
//... More employee records can be added here
\];
// Function to display all employees
function displayEmployees() {
const totalEmployees = employees
.map(employee => \`<p>${employee.id}: ${employee.name} - ${employee.department} - $${employee.salary}</p>\`)
.join('');
document.getElementById('employeesDetails').innerHTML = totalEmployees;
}
function calculateTotalSalaries() {
const totalSalaries = employees.reduce((acc, employee) => acc + employee.salary, 0);
alert(\`Total Salaries: $${totalSalaries}\`);
}
function displayHREmployees() {
const hrEmployees = employees.filter(employee => employee.department === 'HR');
const hrEmployeesDisplay = hrEmployees.map((employee, index) => \`<p>${employee.id}: ${employee.name}: ${employee.name} - ${employee.department} - $${employee.salary}</p>\`).join('');
document.getElementById('employeesDetails').innerHTML = hrEmployeesDisplay;
}
function findEmployeeById(employeeId) {
const foundEmployee = employees.find(employee => employee.id === employeeId);
if (foundEmployee) {
document.getElementById('employeesDetails').innerHTML =\`<p>${foundEmployee.id}: ${foundEmployee.name}: ${foundEmployee.name} - ${foundEmployee.department} - $${foundEmployee.salary}</p>\`;
}
else{
document.getElementById('employeesDetails').innerHTML = 'no employee has been found with this ID';
}
}
function findEmployeeBySpecialization(employeeSpecialization) {
const foundEmployee = employees.find(employee => employee.specialization === employeeSpecialization);
if (foundEmployee) {
document.getElementBySpecialization('employeesDetails').innerHTML =\`<p>${foundEmployee.specialization}: ${foundEmployee.name}: ${foundEmployee.name} - ${foundEmployee.department} - $${foundEmployee.salary}</p>\`;
}
else{
document.getElementBySpecialization('employeesDetails').innerHTML = 'no employee has been found with this Specialization';
}
}