如何重构按钮点击函数实现复用，为空字段添加HTML元素提示

现有代码存在的问题 #

• 空值校验逻辑错误：原代码使用赋值运算符=而非相等判断符===，且校验的是DOM元素本身而非输入框的value值，同时校验时机放在页面加载阶段只会执行一次，应该放在每次触发计算前执行
• 百分比硬编码：每个按钮单独绑定事件，重复代码冗余，后续新增百分比按钮需要额外写事件逻辑，扩展性差
• 未做合法值校验：没有对输入的金额、人数做数字转换和边界判断，人数为0时会出现无穷大的计算异常
• 基础语法错误：innerHTML拼写错误为innerHtml，重置逻辑中用到的custom变量没有提前定义对应DOM元素

重构后完整代码 #

// 提前获取所有DOM元素
const alert = document.querySelector(".alert")
const billAmount = document.querySelector(".input-box-bill-amt")
const percentButtons = document.querySelectorAll(".percent-buttons")
const numOfPeople = document.querySelector(".input-box-num-people")
const tip = document.querySelector(".tip-amount")
const total = document.querySelector(".tip-amount-total")
const reset = document.querySelector(".reset")
const custom = document.querySelector(".custom") // 补充原代码缺失的custom元素获取

// 通用表单校验函数
function validateForm() {
  // 去除首尾空格后判断是否为空
  const billVal = billAmount.value.trim()
  const peopleVal = numOfPeople.value.trim()
  if (!billVal || !peopleVal) {
    alert.innerHTML = "Please make sure you fill in every field"
    return false
  }
  // 校验输入是否为大于0的合法数字
  if (isNaN(Number(billVal)) || Number(billVal) <= 0 || isNaN(Number(peopleVal)) || Number(peopleVal) <= 0) {
    alert.innerHTML = "请输入大于0的合法数字"
    return false
  }
  // 校验通过清空提示
  alert.innerHTML = ""
  return {
    bill: Number(billVal),
    people: Number(peopleVal)
  }
}

// 通用小费计算函数
function calculateTip(percent, bill, people) {
  const tipPerPerson = (percent / 100 * bill) / people
  const totalPerPerson = (bill / people) + tipPerPerson
  // 保留两位小数输出
  tip.innerHTML = tipPerPerson.toFixed(2)
  total.innerHTML = totalPerPerson.toFixed(2)
}

// 用forEach批量绑定百分比按钮点击事件
percentButtons.forEach(button => {
  button.addEventListener('click', () => {
    const formData = validateForm()
    if (!formData) return
    // 方案1：直接从按钮文本提取百分比（要求按钮文本就是纯数字比如"5%"、"5"都可以）
    const percent = Number(button.textContent.replace('%', ''))
    // 方案2：更稳妥的方式是给每个按钮加data-percent自定义属性，比如<button data-percent="5" class="percent-buttons">5%</button>，取值为 button.dataset.percent
    calculateTip(percent, formData.bill, formData.people)
  })
})

// 重置按钮事件
reset.addEventListener('click', () => {
  billAmount.value = ''
  custom.value = ''
  numOfPeople.value = ''
  tip.innerHTML = '00.00'
  total.innerHTML = '00.00'
  alert.innerHTML = '' // 重置时清空提示
})

优化点说明 #

1. 校验逻辑优化：把表单校验抽成独立函数，每次点击计算前自动触发，空值或者输入不合法时直接展示提示，阻止后续计算
2. 重复代码消除：将小费计算逻辑抽成通用函数，用forEach遍历所有百分比按钮绑定事件，后续新增百分比按钮不需要修改JS代码，只需要加对应的HTML元素即可
3. 计算结果优化：新增toFixed(2)统一保留两位小数输出，符合金额展示习惯
4. 异常场景兼容：增加数字合法性和边界值校验，避免出现非数字、0值导致的计算错误

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