如何实现单输入、六输出的价格计算器？现有多输入版本代码优化问询

嘿，作为编程新手能写出初始版本已经很棒了！现在咱们把它改成一个输入框自动算出所有6个结果，核心思路是：只用一个输入源，写一个统一的计算函数，实时更新所有输出项。

问题分析 #

你原来的代码里有6个重复的<form>，每个都用了相同的id="a"和id="o"——但HTML里ID必须是唯一的，这会导致浏览器无法正确识别元素，而且重复的输入框也完全没必要。

修改后的完整代码 #

<!-- 单个表单，包含唯一的输入框和所有输出项 -->
<form onsubmit="return false">
  <label>NHS 价格：</label>
  <input 
    id="nhs-input" 
    type="number" 
    step="any" 
    placeholder="输入NHS价格"
    oninput="calculateAllPrices()"
  >

  <h3>计算结果：</h3>
  <ul>
    <li>Retail: <output id="retail-output" placeholder="Retail"></output></li>
    <li>Schools & CDC's: <output id="schools-output" placeholder="Schools & CDC's"></output></li>
    <li>Trade - Band A: <output id="trade-a-output" placeholder="Trade - Band A"></output></li>
    <li>Trade - Band B: <output id="trade-b-output" placeholder="Trade - Band B"></output></li>
    <li>Trade - Band C: <output id="trade-c-output" placeholder="Trade - Band C"></output></li>
    <li>Trade - Band D: <output id="trade-d-output" placeholder="Trade - Band D"></output></li>
  </ul>
</form>

<script>
function calculateAllPrices() {
  // 获取输入的NHS数值，转成数字，空值时默认0避免报错
  const nhsValue = parseFloat(document.getElementById('nhs-input').value) || 0;

  // 按你的逻辑计算每个价格，简化了部分冗余公式
  const retail = (nhsValue / 0.7).toFixed(0);
  const schools = (nhsValue * 1).toFixed(0); // 逻辑上等价于直接用nhsValue，保留你原写法
  const tradeA = (nhsValue / 0.7 * 0.6).toFixed(0); // 等价于原公式：原价减去40%折扣
  const tradeB = (nhsValue * 1).toFixed(0);
  const tradeC = (nhsValue / 0.7 * 0.8).toFixed(0); // 原价减去20%折扣
  const tradeD = (nhsValue / 0.7 * 0.9).toFixed(0); // 原价减去10%折扣

  // 把计算结果更新到对应输出元素
  document.getElementById('retail-output').value = retail;
  document.getElementById('schools-output').value = schools;
  document.getElementById('trade-a-output').value = tradeA;
  document.getElementById('trade-b-output').value = tradeB;
  document.getElementById('trade-c-output').value = tradeC;
  document.getElementById('trade-d-output').value = tradeD;
}
</script>

关键改动说明 #

1. 唯一输入源：只用一个带唯一ID的输入框，绑定oninput事件，每次输入变化都会触发计算函数。
2. 唯一输出标识：给每个结果项分配了专属ID，确保JS能精准定位要更新的位置。
3. 统一计算逻辑：把所有计算放在一个函数里，先获取输入值，再批量计算6个结果，最后同步更新到页面。
4. 公式简化：比如Trade Band A的公式，把原有的减法逻辑改成乘法，结果一致但更易读。
5. 容错处理：用|| 0保证输入为空时不会出现NaN错误，而是显示0。

这样你只要在一个输入框里填数值，所有结果就会自动实时更新啦！

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