JavaScript使用addEventListener复用actionButton按钮点击失效问题求助

核心问题原因 #

• 你在setSuccessFor函数中直接修改了输入框父容器formControl的innerText，直接把容器内的输入框、错误提示标签全部替换成了纯文本，后续触发表单提交时，读取已经不存在的cardCode输入框的value会直接抛出异常，导致JS执行中断，看起来就是按钮点击无响应
• 没有区分按钮的两种状态逻辑：当前只有一套验证兑换码的逻辑，没有处理按钮变为CONFIRM状态后的确认充值逻辑
• 你不需要重新绑定监听事件：按钮元素本身没有被删除，只是修改了文本，原本绑定的表单提交事件一直有效，无需重复绑定

修复代码 #

修改后的JS代码 #

const form = document.getElementById('myForm');
const cardCode = document.getElementById('cardCode');
const actionButton = document.getElementById('actionButton');
// 新增状态变量记录按钮当前状态
let isConfirmState = false;
let validCodeValue = ''; // 存储验证通过的兑换码对应金额

form.addEventListener('submit', e => {
  e.preventDefault();
  // 根据按钮状态走不同逻辑
  if (isConfirmState) {
    handleConfirm();
  } else {
    checkInputs();
  }
});

document.getElementById('cancel').addEventListener('click', e => {
  window.location.replace('index.html');
});

function checkInputs() {
  // trim to remove the whitespaces
  const cardCodeValue = cardCode.value.trim();

  if (cardCodeValue === '') {
    setErrorFor(cardCode, "请输入有效的兑换码。");
  } else if (cardCodeValue.replace(/\D/g, '').length !== 16) {
    setErrorFor(cardCode, "兑换码无效，请重试。如果该兑换码对应特定应用，请在对应应用中兑换。");
  } else {
    setSuccessForCheck(cardCode, cardCodeValue.replace(/\D/g, ''));
  }
}

function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  formControl.className = 'form-control error';
  small.innerText = message;
}

// 拆分原setSuccessFor为两个函数，分别处理验证通过、确认充值两种场景
function setSuccessForCheck(input, message) {
  const formControl = input.parentElement;
  const newMessage = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(message);
  formControl.className = 'form-control';
  // 不要覆盖整个formControl的内容，只修改提示文本
  const small = formControl.querySelector('small');
  small.innerText = `兑换码有效，你将获得${newMessage}，是否确认充值？`;
  // 隐藏输入框避免重复修改
  input.style.display = 'none';
  // 修改按钮文本，切换状态
  actionButton.innerText = 'CONFIRM';
  isConfirmState = true;
  validCodeValue = message;
}

// 确认充值逻辑
function handleConfirm() {
  const formControl = cardCode.parentElement;
  const newMessage = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(validCodeValue);
  formControl.className = 'form-control';
  const small = formControl.querySelector('small');
  small.innerText = `${newMessage}已充值到账。`;
  // 充值完成后禁用按钮避免重复点击
  actionButton.disabled = true;
  actionButton.innerText = '已完成';
}

改动说明 #

修改后保留了原有DOM结构，没有删除输入框元素，仅在验证通过后隐藏输入框，同时用状态变量区分按钮的两种触发逻辑，不会出现JS执行报错的问题，按钮点击可以正常响应。

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