求助：实现页面加载自动执行+监听输入变化的折扣前价格计算代码

嘿，我来帮你搞定这个问题！核心思路是把计算逻辑封装成独立函数，这样既能在页面首次加载时调用它，又能在输入字段变化时重复触发计算。下面是完整的可运行示例：

1. HTML 结构 #

先准备好输入字段和结果展示区域：

<div>
  <label for="discountedPrice">折扣后价格：</label>
  <input type="number" id="discountedPrice" value="80" min="0" step="0.01">
</div>
<div>
  <label for="discountRate">折扣率（%）：</label>
  <input type="number" id="discountRate" value="20" min="0" max="100" step="0.01">
</div>
<div>
  <p>折扣前原价：<span id="originalPrice">--</span></p>
</div>

2. JavaScript 实现 #

把计算逻辑抽成函数，然后绑定页面加载事件和输入监听：

// 封装计算折扣前价格的核心函数
function calculateOriginalPrice() {
  // 获取输入值，注意转成数字类型（处理空值或非数字情况）
  const discountedPrice = parseFloat(document.getElementById('discountedPrice').value) || 0;
  const discountRate = parseFloat(document.getElementById('discountRate').value) || 0;

  // 计算原价（避免除以0的异常情况）
  let originalPrice = 0;
  if (discountRate < 100) {
    originalPrice = discountedPrice / ((100 - discountRate) / 100);
  }

  // 更新页面显示结果，保留两位小数更贴合价格场景
  document.getElementById('originalPrice').textContent = originalPrice.toFixed(2);
}

// 页面首次加载时自动执行计算
document.addEventListener('DOMContentLoaded', function() {
  calculateOriginalPrice();
});

// 监听输入字段的变化，实时触发计算
const inputFields = document.querySelectorAll('#discountedPrice, #discountRate');
inputFields.forEach(field => {
  // input事件响应实时输入（键盘输入、粘贴等操作）
  field.addEventListener('input', calculateOriginalPrice);
  // change事件覆盖失去焦点时的输入确认场景
  field.addEventListener('change', calculateOriginalPrice);
});

为什么之前的代码只能执行一次？ #

大概率是因为你只在页面加载时执行了一次计算，没有给输入字段绑定事件监听，所以输入内容变化后不会重新触发计算。上面的代码通过input和change事件覆盖了所有输入变化的场景，同时把计算逻辑封装成函数，保证了代码的复用性和可维护性。

内容的提问来源于stack exchange，提问作者Wini the Pooh