JS货币转换器JSON接口解析异常 汇率计算功能失效排查

功能失效由3个核心错误导致：

• 接口请求URL拼接错误：当前写法?json${currency_one}不符合乌克兰央行公开接口的参数规则，且该接口默认返回全量外币兑格里夫纳（UAH）的汇率列表，不存在你代码中写的conversion_rates顶层字段
• 数据字段引用完全不匹配返回结构：你写的data.conversion_rates[currency_two]是其他商业汇率API的返回格式，乌克兰央行接口返回的是数组结构，单条汇率数据中cc字段存货币代码、rate字段存1单位对应外币兑UAH的汇率
• 缺少交叉汇率计算逻辑：该接口只提供外币兑UAH的基准汇率，没有直接提供任意两种非UAH货币的兑换汇率，需要手动通过基准价交叉计算

替换原有的JS逻辑即可：

const currencyEl_one = document.getElementById('currency-one');
const currencyEl_two = document.getElementById('currency-two');
const amountEl_one = document.getElementById('amount-one');
const amountEl_two = document.getElementById('amount-two');

const rateEl = document.getElementById('rate');
const swap = document.getElementById('swap');

function converter() {
  const currency_one = currencyEl_one.value;
  const currency_two = currencyEl_two.value;

  fetch("https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json")
    .then((res) => res.json())
    .then((data) => {
      // 组装汇率映射表，UAH兑自身汇率固定为1
      const rateMap = { UAH: 1 };
      data.forEach(item => {
        rateMap[item.cc] = item.rate;
      });
      // 交叉计算任意两种货币的汇率
      const exchangeRate = rateMap[currency_one] / rateMap[currency_two];
      rateEl.innerText = `1 ${currency_one} = ${exchangeRate.toFixed(4)} ${currency_two}`;
      amountEl_two.value = (amountEl_one.value * exchangeRate).toFixed(2);
    })
    .catch(() => {
      rateEl.innerText = '汇率加载失败，请检查网络后重试';
    });
}

// 事件监听
currencyEl_one.addEventListener('change', converter);
amountEl_one.addEventListener('input', converter);
currencyEl_two.addEventListener('change', converter);
amountEl_two.addEventListener('input', converter);
swap.addEventListener('click', () => {
  const temp = currencyEl_one.value;
  currencyEl_one.value = currencyEl_two.value;
  currencyEl_two.value = temp;
  converter();
});

converter();

• HTML结构不规范：<select>标签内部只能嵌套<option>、<optgroup>标签，你当前写在select内部的<div>、<svg>会被浏览器自动解析到select外部，可能导致选项值获取异常，建议将国旗图标改为绝对定位放在select外侧
• CSS媒体查询拼写错误：@media (maz-width: 600px)中maz-width应为max-width

内容的提问来源于stack exchange，提问作者Андрей Хотюн