IONIC Section 4 - 4.15 Completing Basic JavaScript Logic

Click here for more videos available on our youtube channel !

Now that items are generated dynamically, we need two things: clear the input fields when a new expense is added, and make the Cancel button work. To do that, we add a small clear function in the JS file:

const clear = () => {
  reasonInput.value = '';
  amountInput.value = '';
};

It simply assigns an empty string to value on both inputs, which wipes out anything the user typed. We then call clear() right after appending the new expense to expensesList, and we also bind it to the cancel button:

cancelBtn.addEventListener('click', clear);

Important detail: we pass clear as a reference, not clear(), so it is called only when the click event actually happens. Reloading the app, we can type "invoice" with 15 and click Cancel — the fields are cleared as expected.

Displaying a running total

To show the running total at the bottom of the app, we add a new row in the HTML with an ion-col containing a paragraph "Total expenses:" followed by a <span id="total-expenses"> that will hold the value, so we can grab it from JavaScript.

In app.js we add:

const totalExpensesOutput = document.querySelector('#total-expenses');
let totalExpenses = 0;

// inside the add-expense logic:
totalExpenses += +enteredAmount;
totalExpensesOutput.textContent = totalExpenses;

The + in front of enteredAmount converts the string coming from the input into a Number, so the addition behaves correctly instead of concatenating strings. After updating totalExpenses, we write the new value to the DOM through textContent, so it is not only kept in memory but also displayed.

Reloading the app, we enter an invoice of 6 euros, then a cinema ticket of 8 euros, and the running total appears just below: it works perfectly. The style can still be improved, especially on large screens, and that is what we will see together in the next video.

Summary

This lesson completes the core JavaScript logic for a basic expense tracker application in Ionic. Students learn to create a clear() function that resets input fields, attach event listeners to UI buttons, and implement dynamic calculations that update a running total of expenses in the DOM. The implementation combines function definition, event handling, and data type conversion—essential foundations for interactive web applications.

Key points

  • Create a clear() function that resets input field values to empty strings, enabling users to clear the form after submitting an expense entry
  • Attach event listeners to the cancel button using addEventListener() and pass function references (without parentheses) to ensure dynamic execution when clicked
  • Declare and maintain a totalExpenses variable initialized to 0 that accumulates expense values throughout the application's runtime
  • Convert input values from strings to numbers using the Number() function before adding them to the totalExpenses variable to ensure correct arithmetic
  • Update the DOM in real-time by setting the textContent property of the total expenses element, so calculations are visible to the user
  • Structure HTML with semantic elements (ion-col, span) to create designated containers for displaying calculated totals

FAQ

Why do we pass function references without parentheses to event listeners?

Passing a function reference (e.g., 'clear' instead of 'clear()') allows the event listener to invoke the function dynamically when the button is clicked. Including parentheses would execute the function immediately during setup rather than waiting for the click event.

How do we prevent string concatenation errors when summing expenses?

We use the Number() function to explicitly convert input values from strings to numbers before adding them to totalExpenses. Without conversion, JavaScript would concatenate values as strings (e.g., '5' + '10' = '510') instead of performing arithmetic addition.

Why update both the JavaScript variable and the DOM?

The JavaScript variable (totalExpenses) stores the actual data in memory, but users only see what appears in the DOM. Updating both ensures the application logic remains accurate while displaying real-time feedback to the user.