ionic 5 alert buttons with JavaScript - ionic-framework

Question

Without using any Javascript framework or Class, I am working with pure Javascript and Ionic 5 .
I am trying to display the alert notification when the user hit the Add button
If the User does not fill the fields and then press the ADD Button, an alert pops out to notify the user to fill the fields
Note: Add button its function also is to Add two fields
The issue is when Hit the Add button, No notification pops out
here is the code
HTML section
<ion-alert-controller></ion-alert-controller>
In app.js file
const btnConfirm = document.querySelector('#btn-confirm');
const alertCtrl = document.querySelector('ion-alert-contrller');
btnConfirm.addEventListener('click' ,() => {
const enterReason = reasonInput.value;
const enterInput = parseFloat(amountInput.value).toFixed(2);
if(enterReason.trim().length <=0 || enterInput <= 0 || enterInput.trim().length <=0
) {
async function handleButtonClick() {
const alert = await alertController.create({
message: 'Please enter valid reason and amount!',
header: 'Invalid Inputs',
buttons: ['Okay']
});
await alert.present();
}
return; // if values are Invalid - stop execution

Answer 1

You should do somethign like:
const btnConfirm = document.querySelector('#btn-confirm');
btnConfirm.addEventListener('click' ,() => {
const enterReason = reasonInput.value;
const enterInput = parseFloat(amountInput.value).toFixed(2);
if(enterReason.trim().length <=0 || enterInput <= 0 || enterInput.trim().length <=0) {
presentAlert(); // call your alert function when input is invalid
return;
}else{
// continue execution
}
})
// keep your alert as a function. and call it when ever you want.
async function presentAlert() {
const alert = document.createElement('ion-alert');
alert.cssClass = 'my-custom-class';
alert.header = 'Alert';
alert.subHeader = 'Subtitle';
alert.message = 'This is an alert message.';
alert.buttons = ['OK'];
document.body.appendChild(alert);
await alert.present();
const { role } = await alert.onDidDismiss();
console.log('onDidDismiss resolved with role', role);
}