Google Apps中JS金额求和功能异常问题排查求助

问题分析 #

• 负数丢失符号：原正则表达式过滤掉了负号，导致输入负数自动转为正数
• 千分位逗号解析错误：parseFloat无法识别带逗号的数值，会截断逗号后的内容，导致求和结果错误
• 事件绑定无效：getElementsByClassName返回HTMLCollection，不能直接调用addEventListener，需逐个绑定

修复后的代码 #

1. 格式化函数修复（HTML头部脚本） #

<script>
function toFinalNumberFormat(controlToCheck) {
  let enteredNum = controlToCheck.value.trim();
  // 仅保留数字、小数点和开头的负号，去除其他字符
  enteredNum = enteredNum.replace(/[^-0-9.]/g, '');
  // 确保只有开头一个负号
  if (enteredNum.indexOf('-') > 0) {
    enteredNum = enteredNum.replace(/-/g, '');
  }
  // 转为数字后格式化，支持负数千分位和固定两位小数
  const num = Number(enteredNum);
  controlToCheck.value = isNaN(num) ? '' : num.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
}
</script>

2. 求和函数与事件绑定修复（HTML Body脚本） #

<script>
// 给所有add-input元素绑定input事件
document.querySelectorAll(".add-input").forEach(input => {
  input.addEventListener("input", sumTotal);
});

function sumTotal() {
  const inputs = document.querySelectorAll('.add-input');
  let totalSum = 0;

  inputs.forEach(input => {
    // 移除千分位逗号，转成浮点数，处理空值和非法输入
    const value = input.value.replace(/,/g, '');
    totalSum += isNaN(parseFloat(value)) ? 0 : parseFloat(value);
  });

  const total = document.getElementById("total");
  // 格式化总和为带千分位的两位小数
  total.value = totalSum.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
}
</script>

3. HTML小调整（可选） #

原output标签的type="number"会屏蔽千分位逗号，建议改为文本显示：

<div class="form-floating col-sm-4"> 
  <h3>Total:  $<output id="total"></output></h3>
</div>

修复要点说明 #

• 正则表达式保留开头负号，避免负数被强制转为正数
• 格式化时通过toLocaleString参数固定两位小数，统一显示格式
• 求和前先移除输入值中的千分位逗号，确保parseFloat能正确解析完整数值
• 使用querySelectorAll替代getElementsByClassName，更便捷地遍历元素绑定事件
• 增加NaN判断，避免空值或非法输入导致求和逻辑出错

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