纯JavaScript配合Ionic 5点击Add按钮弹出alert不生效问题求助

你代码里存在4处明显问题，逐一修改后即可正常弹出弹窗：

• 拼写错误：获取ion-alert-controller节点时拼写错误，你写的ion-alert-contrller少了字母o，正确拼写为ion-alert-controller
• 函数未执行：你在条件判断里仅定义了handleButtonClick异步函数，但没有调用它，弹窗逻辑根本不会运行
• 变量名不一致：你定义的alert控制器变量名为alertCtrl，但调用create方法时用的是alertController，变量名对应不上会报错
• 数值校验逻辑错误：parseFloat(amountInput.value)如果拿到非数字内容会返回NaN，直接调用toFixed会抛出异常，且后续判断逻辑也会失效

修复后的完整代码 #

HTML部分 #

<ion-alert-controller></ion-alert-controller>
<!-- 补充对应字段和按钮代码 -->
<input id="reason-input" type="text" placeholder="请输入原因">
<input id="amount-input" type="number" step="0.01" placeholder="请输入金额">
<ion-button id="btn-confirm">Add</ion-button>

app.js部分 #

const btnConfirm = document.querySelector('#btn-confirm');
// 修正控制器拼写错误
const alertCtrl = document.querySelector('ion-alert-controller');
const reasonInput = document.querySelector('#reason-input');
const amountInput = document.querySelector('#amount-input');

btnConfirm.addEventListener('click', async () => {
  const enterReason = reasonInput.value.trim();
  const amountVal = amountInput.value.trim();
  const enterInput = parseFloat(amountVal);
  
  // 输入合法性校验
  if (enterReason.length <=0 || isNaN(enterInput) || enterInput <= 0) {
    const alert = await alertCtrl.create({
      message: '请输入合法的原因和金额！',
      header: '输入不合法',
      buttons: ['确定']
    });
    await alert.present();
    return;
  }

  // 校验通过后执行字段相加的业务逻辑
  const formattedAmount = enterInput.toFixed(2);
  // 后续业务代码写在下方
});

内容的提问来源于stack exchange，提问作者makoz