本教程详细讲解如何使用JavaScript实现多币种价格转换功能。文章将涵盖从远程API获取汇率数据、处理页面上多个价格元素的转换，以及如何避免重复转换导致的错误。核心在于利用`querySelectorAll`选取所有相关元素，并维护原始价格值以确保每次转换都基于准确的初始数据，从而实现稳定、准确的货币换算。
在现代Web应用中，动态货币转换是一个常见需求。本文将指导您构建一个功能，该功能能够从外部API获取实时汇率，并根据用户选择的货币类型，对页面上的多个价格进行实时转换。我们将着重解决在处理多个价格元素以及避免重复计算导致错误的关键问题。
1. HTML结构准备
首先，我们需要一个包含货币选择下拉菜单和多个价格显示元素的HTML结构。这些价格元素将通过JavaScript进行动态更新。
<select name="coin" id="coin"> <option value="default" default>选择货币</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>
在这个结构中，select元素用于用户选择货币，其id为coin。三个h1元素都带有priceCoin类，它们将是我们要进行货币转换的目标。初始值（2, 25, 60）代表某种基础货币的价格。
立即学习“Java免费学习笔记（深入）”；
2. JavaScript核心逻辑
我们将通过JavaScript实现以下功能：
- 从外部API获取汇率数据。
- 初始化页面上的价格显示。
- 监听货币选择的变化，并根据选定的货币更新所有价格。
2.1 获取货币汇率数据
我们将使用fetch API从一个公共货币API获取汇率数据。这里以欧元（EUR）为基准货币获取对美元（USD）和英镑（GBP）的汇率。
// 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();getCurrency函数负责发起网络请求。一旦数据成功获取，它会将JSON响应传递给crearMoneda函数进行进一步处理。
2.2 处理货币数据与价格转换逻辑
crearMoneda函数是核心逻辑所在，它接收API返回的货币数据，并设置事件监听器来处理货币转换。
function crearMoneda(moneda) {
// 从API数据中提取所需汇率
const eurRate = moneda.eur.eur; // 欧元对欧元的汇率，通常为1
const usdRate = moneda.eur.usd; // 欧元对美元的汇率
const gbpRate = moneda.eur.gbp; // 欧元对英镑的汇率
// 获取HTML元素
const selectCoin = document.getElementById('coin');
// 使用querySelectorAll获取所有具有'priceCoin'类的元素，这将返回一个NodeList
const priceCoinsArr = document.querySelectorAll('.priceCoin');
// 存储原始价格值。这是关键！
// 避免在每次转换时基于上一次转换的结果进行计算。
const initialVals = [2, 25, 60];
// 构建一个汇率对象，方便通过货币代码访问
const exchangeValues = {
"default": 1, // 默认选项，不进行转换或视为1倍
'eur': eurRate,
'usd': usdRate,
"gbp": gbpRate
};
// 监听货币选择框的变化事件
selectCoin.addEventListener('change', (event) => {
let coinSelected = event.target.value; // 获取用户选择的货币代码
// 遍历所有原始价格，并根据选定的货币进行转换
initialVals.forEach((value, index) => {
// 获取对应的HTML元素，并更新其innerHTML
priceCoinsArr[index].innerHTML = (value * exchangeValues[coinSelected]).toFixed(2); // 保留两位小数
});
});
}关键改进点分析：
- querySelectorAll 的使用： 原始代码中使用querySelector('.priceCoin')只会返回第一个匹配的元素。为了操作所有价格元素，必须使用document.querySelectorAll('.priceCoin')，它会返回一个包含所有匹配元素的NodeList（类似于数组）。
- initialVals 数组： 这是解决“重复转换导致数值递减”问题的关键。我们不再从priceCoin.innerHTML中获取当前值进行计算，而是维护一个存储原始价格的数组initialVals。每次进行货币转换时，都基于这些原始值乘以新的汇率，确保计算的准确性。
- exchangeValues 对象： 将所有汇率存储在一个对象中，通过货币代码（键）直接访问汇率（值），使得代码更简洁、可读性更高，并避免了冗长的switch语句。
- forEach 循环： 结合initialVals数组和priceCoinsArr NodeList，使用forEach循环可以方便地遍历每个原始价格，并将其转换后的结果更新到对应的HTML元素中。
- 错误处理与格式化： 添加了catch块处理fetch请求可能出现的错误，并在更新价格时使用toFixed(2)确保显示两位小数，提升用户体验。
3. 完整代码示例
将上述HTML和JavaScript代码整合，即可得到一个功能完整的货币转换器。
HTML (index.html):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多币种价格转换器</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
select { padding: 8px; margin-bottom: 20px; }
h1 { margin: 10px 0; font-size: 2em; }
</style>
</head>
<body>
<select name="coin" id="coin">
<option value="default">选择货币</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>
<script src="app.js"></script>
</body>
</html>JavaScript (app.js):
// 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; // 欧元对欧元的汇率，通常为1
const usdRate = moneda.eur.usd; // 欧元对美元的汇率
const gbpRate = moneda.eur.gbp; // 欧元对英镑的汇率
// 获取HTML元素
const selectCoin = document.getElementById('coin');
// 使用querySelectorAll获取所有具有'priceCoin'类的元素，这将返回一个NodeList
const priceCoinsArr = document.querySelectorAll('.priceCoin');
// 存储原始价格值。这是关键！
// 避免在每次转换时基于上一次转换的结果进行计算。
// 注意：这里的原始值需要与HTML中h1标签的初始值一致。
const initialVals = [
parseFloat(priceCoinsArr[0].innerHTML),
parseFloat(priceCoinsArr[1].innerHTML),
parseFloat(priceCoinsArr[2].innerHTML)
];
// 构建一个汇率对象，方便通过货币代码访问
const exchangeValues = {
"default": 1, // 默认选项，不进行转换或视为1倍
'eur': eurRate,
'usd': usdRate,
"gbp": gbpRate
};
// 监听货币选择框的变化事件
selectCoin.addEventListener('change', (event) => {
let coinSelected = event.target.value; // 获取用户选择的货币代码
// 遍历所有原始价格，并根据选定的货币进行转换
initialVals.forEach((value, index) => {
// 获取对应的HTML元素，并更新其innerHTML
priceCoinsArr[index].innerHTML = (value * exchangeValues[coinSelected]).toFixed(2); // 保留两位小数
});
});
}注意事项：
- 在initialVals的初始化中，为了更具通用性，我们直接从priceCoinsArr中解析了初始值，而不是硬编码。这使得HTML中的初始值可以直接控制initialVals。
- 汇率API可能会有调用限制或不稳定，实际生产环境中应考虑使用更稳定的服务、缓存机制和错误重试策略。
- 对于用户体验，可以在加载数据时显示加载指示器，并在转换时提供即时反馈。
- 此示例中的default选项被设置为汇率1，这意味着选择它将显示原始价格。您可以根据需求调整此行为。
总结
通过本教程，我们学习了如何构建一个健壮的JavaScript货币转换器。核心思想在于：
- 使用document.querySelectorAll()准确获取所有需要操作的DOM元素。
- 维护一个独立的原始价格数组，确保每次货币转换都基于初始值，避免累积计算错误。
- 将汇率组织成易于访问的对象结构，简化代码逻辑。
遵循这些原则，您可以为您的Web应用程序实现稳定且用户友好的货币转换功能。
