my js code: // Define arrays for income and expenses let income = [ { name: 'Salary', amount: 4000, recurring: true }, { name: 'Freelance Work', amount: 1000, recurring: false }, { name: 'Gift', amount: 50, recurring: false }, { name: 'Bonus', amount: 500, recurring: true }, { name: 'Investment Income', amount: 200, recurring: true } ];   let expenses = [ { name: 'Rent', amount: 1500, recurring: true }, { name: 'Groceries', amount: 350, recurring: true }, { name: 'Utilities', amount: 200, recurring: true }, { name: 'Transportation', amount: 100, recurring: true }, { name: 'Entertainment', amount: 50, recurring: false } ];   // Function to display the income list function displayIncome() { let table = document.createElement('table'); let totalIncome = 0;   for (let i = 0; i < income.length; i++) { let row = document.createElement('tr'); let nameCell = document.createElement('td'); nameCell.textContent = income[i].name; let amountCell = document.createElement('td'); amountCell.textContent = 'R' + income[i].amount; let recurringCell = document.createElement('td'); recurringCell.textContent = income[i].recurring ? 'Yes' : 'No';   row.appendChild(nameCell); row.appendChild(amountCell); row.appendChild(recurringCell); table.appendChild(row);   totalIncome += income[i].amount; }   let incomeList = document.getElementById('income-list'); incomeList.innerHTML = ''; incomeList.appendChild(table);   return totalIncome; }   // Function to display the expense list function displayExpenses() { let table = document.createElement('table'); let totalExpenses = 0;   for (let i = 0; i < expenses.length; i++) { let row = document.createElement('tr'); let nameCell = document.createElement('td'); nameCell.textContent = expenses[i].name; let amountCell = document.createElement('td'); amountCell.textContent = 'R' + expenses[i].amount; let recurringCell = document.createElement('td'); recurringCell.textContent = expenses[i].recurring ? 'Yes' : 'No';   row.appendChild(nameCell); row.appendChild(amountCell); row.appendChild(recurringCell); table.appendChild(row);   totalExpenses += expenses[i].amount; }   let expensesList = document.getElementById('expenses-list'); expensesList.innerHTML = ''; expensesList.appendChild(table);   return totalExpenses; }   // Add income button event listener let addIncomeButton = document.getElementById('add-income-button'); addIncomeButton.addEventListener('click'), function() { let name = prompt('Enter income name:'); let amount = parseInt(prompt('Enter income amount:')); let recurring = confirm('Is income recurring?');   let newIncome = { name: name, amount: amount, recurring: recurring };   income.push(newIncome);   let totalIncome = displayIncome(); let totalExpenses = displayExpenses(); let disposableIncome = totalIncome - totalExpenses;   let savings = parseInt(prompt('How much would you like to save?')); let remainingDisposableIncome = disposableIncome - savings;   alert('Your total disposable income is R' + disposableIncome + ', and your remaining disposable income after saving R' + savings); }   my html: Budgeting Website Budgeting Website Add Income Add Expense Total Disposable Income: Calculate Savings lecturers comment: The id's assigned to the buttons are not matching the id's provided in your javascript to add the event listeners. PLEASE HELP ME FIX ACCORDING TO LECTURERS COMMENT

my js code:

// Define arrays for income and expenses

let income = [

{ name: 'Salary', amount: 4000, recurring: true },

{ name: 'Freelance Work', amount: 1000, recurring: false },

{ name: 'Gift', amount: 50, recurring: false },

{ name: 'Bonus', amount: 500, recurring: true },

{ name: 'Investment Income', amount: 200, recurring: true }

];

let expenses = [

{ name: 'Rent', amount: 1500, recurring: true },

{ name: 'Groceries', amount: 350, recurring: true },

{ name: 'Utilities', amount: 200, recurring: true },

{ name: 'Transportation', amount: 100, recurring: true },

{ name: 'Entertainment', amount: 50, recurring: false }

];

// Function to display the income list

function displayIncome() {

let table = document.createElement('table');

let totalIncome = 0;

for (let i = 0; i < income.length; i++) {

let row = document.createElement('tr');

let nameCell = document.createElement('td');

nameCell.textContent = income[i].name;

let amountCell = document.createElement('td');

amountCell.textContent = 'R' + income[i].amount;

let recurringCell = document.createElement('td');

recurringCell.textContent = income[i].recurring ? 'Yes' : 'No';

row.appendChild(nameCell);

row.appendChild(amountCell);

row.appendChild(recurringCell);

table.appendChild(row);

totalIncome += income[i].amount;

}

let incomeList = document.getElementById('income-list');

incomeList.innerHTML = '';

incomeList.appendChild(table);

return totalIncome;

}

// Function to display the expense list

function displayExpenses() {

let table = document.createElement('table');

let totalExpenses = 0;

for (let i = 0; i < expenses.length; i++) {

let row = document.createElement('tr');

let nameCell = document.createElement('td');

nameCell.textContent = expenses[i].name;

let amountCell = document.createElement('td');

amountCell.textContent = 'R' + expenses[i].amount;

let recurringCell = document.createElement('td');

recurringCell.textContent = expenses[i].recurring ? 'Yes' : 'No';

row.appendChild(nameCell);

row.appendChild(amountCell);

row.appendChild(recurringCell);

table.appendChild(row);

totalExpenses += expenses[i].amount;

}

let expensesList = document.getElementById('expenses-list');

expensesList.innerHTML = '';

expensesList.appendChild(table);

return totalExpenses;

}

// Add income button event listener

let addIncomeButton = document.getElementById('add-income-button');

addIncomeButton.addEventListener('click'), function() {

let name = prompt('Enter income name:');

let amount = parseInt(prompt('Enter income amount:'));

let recurring = confirm('Is income recurring?');

let newIncome = {

name: name,

amount: amount,

recurring: recurring

};

income.push(newIncome);

let totalIncome = displayIncome();

let totalExpenses = displayExpenses();

let disposableIncome = totalIncome - totalExpenses;

let savings = parseInt(prompt('How much would you like to save?'));

let remainingDisposableIncome = disposableIncome - savings;

alert('Your total disposable income is R' + disposableIncome + ', and your remaining disposable income after saving R' + savings);

}

my html:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Budgeting Website</title>

<link rel="stylesheet" href="budget.css">

</head>

<body>

<h1>Budgeting Website</h1>

<div id="income"></div>

<button id="add-income">Add Income</button>

<div id="expenses"></div>

<button id="add-expense">Add Expense</button>

<br><br>

<h3>Total Disposable Income:</h3>

<input type="text" id="total-disposable-income" readonly>

<br><br>

<button id="calculate-savings">Calculate Savings</button>

<script src="budget.js"></script>

</body>

</html>

lecturers comment:

The id's assigned to the buttons are not matching the id's provided in your javascript to add the event listeners.

PLEASE HELP ME FIX ACCORDING TO LECTURERS COMMENT