JavaScript实现小费计算器功能运行异常问题排查求助

你当前的代码存在以下几处问题导致JS功能无法正常运行：

• DOM操作方法拼写错误：getElementByClassName 应为 getElementsByClassName，该方法返回的是所有匹配类名的DOM集合，需要通过索引[0]取首个目标元素赋值
• 小费百分比取值异常：你的百分比按钮未设置value属性，直接读取e.target.value会得到空值，需要改为读取按钮文本内容、过滤%符号后转为数值使用
• 数据类型未做转换：分摊人数字段直接取到的是字符串类型，未转为数字可能导致运算异常
• JS执行时机错误：脚本放在<head>标签内，页面DOM还未渲染完成就执行代码，无法获取到按钮元素绑定监听事件
• 计算结果未格式化：金额类结果需要保留两位小数，同时添加$符号匹配现有显示规则

修复后完整JS代码 #

// 监听DOM加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  const allButtons = document.getElementsByClassName('btn');
  const noOfButtons = allButtons.length;

  function tipCalculate(e) {
    // 取值同时做容错处理，为空时默认赋值0或1避免运算错误
    const billAmount = parseFloat(document.getElementById('bill__amount').value) || 0;
    const tipPercent = parseFloat(e.target.innerText.replace('%', '')) || 0;
    let noOfPeople = parseInt(document.getElementById('people-no').value) || 1;
    // 避免人数为0导致除以0报错
    if (noOfPeople <= 0) noOfPeople = 1;

    const tipAmountPerPerson = (billAmount * tipPercent / 100 / noOfPeople).toFixed(2);
    const totalAmountPerPerson = ((billAmount + billAmount * tipPercent / 100) / noOfPeople).toFixed(2);

    // 修正DOM取值方法，赋值带货币符号
    document.getElementsByClassName('tip-amount-display')[0].innerHTML = `$${tipAmountPerPerson}`;
    document.getElementsByClassName('total-amount-display')[0].innerHTML = `$${totalAmountPerPerson}`;
  }

  // 绑定按钮点击事件
  for (let i = 0; i < noOfButtons; i++) {
    allButtons[i].addEventListener('click', tipCalculate);
  }

  // 补充重置按钮功能
  document.querySelector('.reset').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('bill__amount').value = '';
    document.getElementById('people-no').value = '';
    document.getElementById('tip__custom').value = '';
    document.getElementsByClassName('tip-amount-display')[0].innerHTML = '$0.00';
    document.getElementsByClassName('total-amount-display')[0].innerHTML = '$0.00';
  })
})

如果不需要额外加DOM加载监听，也可以直接把原来head中的<script src="js/tip.js"></script>移动到页面</body>闭合标签之前，效果一致。

如果需要支持自定义小费比例输入，额外给#tip__custom输入框绑定change事件，取值后按同样逻辑计算即可。

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