JS获取与修改值重复问题：price_buy_id与valCurrency相乘结果重复

嘿，这个问题我太熟了！大概率是你每次计算时都在已经被修改过的结果上重复相乘，而不是基于最初的price_buy_id原始值来计算。举个栗子：假设初始price_buy_id是10，汇率是2，第一次算完变成20；第二次汇率改成3，你又拿20×3得到60，但其实你想要的是原始10×3=30对吧？这就是重复计算的根源。

核心解决方案：保留原始基准值 #

解决思路很简单——把最初的price_buy_id数值存成一个不会被修改的变量，每次计算都用这个原始值乘以当前的汇率，而不是用已经算过的结果。

具体代码示例 #

假设你的DOM结构大概是这样的：

<input type="number" id="price_buy_id" value="100">
<select id="currency_price_buy">
  <option value="1">人民币</option>
  <option value="0.15">美元</option>
  <option value="0.13">欧元</option>
</select>

对应的JS代码应该这么写：

// 第一步：页面加载时就保存原始的price_buy_id数值，这个变量永远不修改
const originalPrice = parseFloat(document.getElementById('price_buy_id').value);

// 获取币种选择框元素
const currencySelector = document.getElementById('currency_price_buy');

// 监听币种变化事件
currencySelector.addEventListener('change', function() {
  // 获取当前选中的汇率值，转成数字类型
  const currentCurrencyRate = parseFloat(this.value);
  
  // 关键：用原始值 × 当前汇率，而不是用price_buy_id的当前值
  const calculatedResult = originalPrice * currentCurrencyRate;
  
  // 更新显示（这里可以根据需求调整，比如保留两位小数）
  document.getElementById('price_buy_id').value = calculatedResult.toFixed(2);
});

额外注意事项 #

• 如果price_buy_id的原始值是异步加载的（比如从后端接口获取），一定要等原始值加载完成后再初始化originalPrice变量，比如放在接口回调或者DOMContentLoaded事件里。
• 记得用parseFloat/Number()把字符串转成数值，避免出现字符串拼接的坑（比如"10"×2变成20，但"10"+2变成"102"）。
• 如果需要支持手动修改price_buy_id的原始值，那得在手动修改时同步更新originalPrice变量，比如给price_buy_id加一个blur或者change事件，当用户手动输入后更新基准值。

这样改完之后，不管你切换多少次币种，计算结果都会基于最初的原始值，再也不会出现重复相乘的问题啦！

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