使用JavaScript实现动态货币转换：多价格同步更新与避免重复计算的教程

// 定义获取货币数据的函数
function getCurrency() {
  fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json')
    .then(res => res.json()) // 将响应解析为JSON格式
    .then(data => {
      crearMoneda(data); // 成功获取数据后调用处理函数
    })
    .catch(error => {
      console.error('获取货币数据失败:', error); // 捕获并处理错误
    });
}

// 在页面加载时调用，获取初始汇率
getCurrency();

<select name="coin" id="coin">
  <option value="default" default>Select coin</option>
  <option value="eur">EUR</option>
  <option value="usd">USD</option>
  <option value="gbp">GBP</option>
</select>

<h1 class='priceCoin'>2</h1>
<h1 class='priceCoin'>25</h1>
<h1 class='priceCoin'>60</h1>

function crearMoneda(moneda) {
  // 从API数据中提取所需的汇率
  const eurRate = moneda.eur.eur; // 欧元对欧元，通常为1
  const usdRate = moneda.eur.usd; // 欧元对美元
  const gbpRate = moneda.eur.gbp; // 欧元对英镑

  // 获取货币选择下拉菜单
  const selectCoin = document.getElementById('coin');
  // 获取所有带有'priceCoin'类的h1标签
  // 注意：使用querySelectorAll来获取所有匹配的元素，而不是querySelector（只返回第一个）
  const priceCoinsArr = document.querySelectorAll('.priceCoin');

  // 存储原始价格值。这是关键一步，用于避免累积转换错误。
  // 确保这些值与HTML中h1标签的初始内容一致。
  const initialPrices = [2, 25, 60]; 

  // 将汇率组织成一个对象，方便通过选择的货币名称访问
  const exchangeValues = {
    "default": 1, // 默认选项，通常不进行转换或保持原值
    'eur': eurRate,
    'usd': usdRate,
    "gbp": gbpRate
  };

  // ... 转换逻辑将在下一步添加
}

function crearMoneda(moneda) {
  // ... (前面的变量定义，如 eurRate, usdRate, gbpRate, selectCoin, priceCoinsArr, initialPrices, exchangeValues)

  // 为下拉菜单添加change事件监听器
  selectCoin.addEventListener('change', (event) => {
    let coinSelected = event.target.value; // 获取用户选择的货币代码

    // 遍历原始价格数组，并更新每个显示元素
    initialPrices.forEach((initialValue, index) => {
      // 根据用户选择的货币获取对应的汇率
      const conversionRate = exchangeValues[coinSelected];
      // 计算转换后的新价格
      const convertedPrice = initialValue * conversionRate;
      // 更新对应h1标签的innerHTML
      // 可以根据需要添加toFixed()来格式化小数点
      priceCoinsArr[index].innerHTML = convertedPrice.toFixed(2); 
    });
  });
}

// cambio de moneda (货币转换)
function getCurrency() {
  fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json')
    .then(res => res.json())
    .then(data => {
      crearMoneda(data);
    })
    .catch(error => {
      console.error('获取货币数据失败:', error);
    });
}

getCurrency();

function crearMoneda(moneda) {
  // 从API数据中提取所需的汇率
  const eurRate = moneda.eur.eur;
  const usdRate = moneda.eur.usd;
  const gbpRate = moneda.eur.gbp;

  // 获取DOM元素
  const selectCoin = document.getElementById('coin');
  const priceCoinsArr = document.querySelectorAll('.priceCoin');

  // 存储原始价格值，这是避免累积转换错误的关键
  const initialPrices = [2, 25, 60]; // 确保与HTML中h1标签的初始内容一致

  // 将汇率组织成一个对象，方便通过选择的货币名称访问
  const exchangeValues = {
    "default": 1, // 默认选项，可以根据需要设置，这里设为1表示不转换
    'eur': eurRate,
    'usd': usdRate,
    "gbp": gbpRate
  };

  // 为下拉菜单添加change事件监听器
  selectCoin.addEventListener('change', (event) => {
    let coinSelected = event.target.value; // 获取用户选择的货币代码

    // 遍历原始价格数组，并更新每个显示元素
    initialPrices.forEach((initialValue, index) => {
      const conversionRate = exchangeValues[coinSelected];
      const convertedPrice = initialValue * conversionRate;
      // 更新对应h1标签的innerHTML，并格式化为两位小数
      priceCoinsArr[index].innerHTML = convertedPrice.toFixed(2);
    });
  });
}