多价格币种转换问题求助：重复转换异常与批量生效失败

问题1：切换币种后基准价格异常 #

问题根源是每次转换都直接拿页面上已修改后的价格作为计算基准，而非保留原始的初始价格。比如第一次转换后价格已经变成转换后的值，第二次切换时又用这个值再乘汇率，导致基准不断被篡改，最终数值越来越离谱。

问题2：转换仅作用于第一个.priceCoin元素 #

document.querySelector('.priceCoin')只会选中页面中第一个匹配该类名的元素，剩下两个<h1>自然不会被修改，得用querySelectorAll获取所有目标元素再批量处理。

修改后的完整JavaScript代码 #

// 币种转换
function getCurrency() {
  fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json')
    .then(res => res.json())
    .then(data => {
      crearMoneda(data);
    })
}

getCurrency();

function crearMoneda(moneda) {
  const eur = moneda.eur.eur;
  const usd = moneda.eur.usd;
  const gbp = moneda.eur.gbp;

  const selectCoin = document.getElementById('coin');
  // 获取所有.priceCoin元素
  const priceCoins = document.querySelectorAll('.priceCoin');
  // 保存所有元素的初始基准价格（关键：用原始值作为计算基准）
  const originalPrices = Array.from(priceCoins).map(el => parseInt(el.innerHTML));

  selectCoin.addEventListener('change', (event) => {
    const coinSelected = event.target.value;
    // 遍历所有.priceCoin元素，逐个更新
    priceCoins.forEach((el, index) => {
      let result;
      const originalPrice = originalPrices[index];
      switch (coinSelected) {
        case 'eur':
          result = originalPrice * eur;
          break;
        case 'usd':
          result = originalPrice * usd;
          break;
        case 'gbp':
          // 修复原代码的错误：这里之前误用了usd汇率
          result = originalPrice * gbp;
          break;
        default:
          // 未选择币种时恢复原始价格
          result = originalPrice;
      }
      // 保留两位小数让结果更规范
      el.innerHTML = result.toFixed(2);
    })
  })
}

关键改动说明 #

1. 保存初始基准值：用originalPrices数组存储每个.priceCoin元素的初始数值，后续所有转换都基于这个原始值计算，彻底避免基准被篡改的问题。
2. 批量处理元素：用querySelectorAll获取所有目标元素，通过forEach遍历逐个更新内容，确保三个<h1>都能被转换。
3. 修复汇率错误：原代码中GBP分支误用了USD汇率，现已修正为gbp。
4. 添加默认分支：未选择币种时恢复显示原始价格，体验更友好。
5. 格式化数值：用toFixed(2)保留两位小数，避免出现过长的小数位。

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