文本框change事件商品折扣计算及货币格式化求助

完整实现方案（原生JavaScript，无需jQuery/Ajax） #

HTML结构

搭建基础输入框布局，给每个输入框设置唯一ID，总价框设为只读避免用户修改：

<div>
  <label>商品成本价：</label>
  <input type="number" id="costPrice" placeholder="输入成本价" value="14000">
</div>
<div>
  <label>折扣百分比：</label>
  <input type="number" id="discountPercent" placeholder="输入折扣（如29）" value="29" min="0" max="100">
</div>
<div>
  <label>折后总价：</label>
  <input type="text" id="totalPrice" readonly>
</div>

JavaScript逻辑

包含货币格式化、计算逻辑、事件绑定三个核心部分：

// 货币格式化函数：将数字转为$X,XXX.XX格式
function formatCurrency(num) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(num);
}

// 计算折后总价的核心函数
function calculateTotal() {
  // 获取输入值并转为数字，空值或非数字默认取0，避免NaN
  const costPrice = parseFloat(document.getElementById('costPrice').value) || 0;
  const discountPercent = parseFloat(document.getElementById('discountPercent').value) || 0;
  
  // 计算折扣金额与折后总价
  const discountAmount = (discountPercent / 100) * costPrice;
  const totalPrice = costPrice - discountAmount;
  
  // 格式化后更新总价输入框
  document.getElementById('totalPrice').value = formatCurrency(totalPrice);
  
  // 可选：同步格式化成本价的显示（去掉$符号，不影响数字输入）
  document.getElementById('costPrice').value = formatCurrency(costPrice).replace(/^\$/, '');
}

// 绑定事件：输入过程中实时计算
document.getElementById('costPrice').addEventListener('input', calculateTotal);
document.getElementById('discountPercent').addEventListener('input', calculateTotal);

// 页面加载时初始化计算
window.addEventListener('load', calculateTotal);

关键说明 #

• 无需jQuery/Ajax：原生JavaScript完全能满足需求，Ajax用于和后端交互，这里只是本地计算，完全用不上。
• 货币格式化：用原生Intl.NumberFormat实现，比自己写正则更稳定，支持多地区货币格式，这里指定了美元规则。
• 事件选择：用input事件代替change，能实现实时更新；如果只需要失去焦点时计算，换成change事件即可。
• 容错处理：用|| 0处理空输入或非数字输入，避免出现计算错误。

修正你原代码的问题 #

你的calculatePercent函数缺少闭合的}，修正后可以整合到上述逻辑中，用于计算折扣金额。

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