执行JavaScript计算出错：获取BTC价格并与钱包余额相乘问题求助

先梳理两段代码里的核心错误：

第一段代码的错误点 #

• 函数名大小写不匹配：定义的是getprice()（小写p），调用时写成了getPrice()（大写P），导致函数未找到错误
• API返回值解析错误：接口返回的是{USD: 具体价格}的对象，直接parseFloat(data)会把整个对象转为NaN，应该提取data.USD再转换
• 缺失balance变量：代码中使用了balance但未声明赋值
• 未执行计算函数：calculate()仅定义但未调用
• DOM元素拼写错误：页面里的<spam>应该是<span>，否则无法正确获取元素

第二段代码的错误点 #

• 变量作用域问题：data是getprice()内部的局部变量，外部无法直接访问，{data}属于无效语法
• 错误的计算方式：对象不能直接参与数值运算，{data} * {balance}会得到NaN
• 异步时序问题：getprice()是异步函数，后续计算代码会在API请求完成前执行，此时还拿不到价格数据
• 同样缺失balance变量

修正后的完整代码 #

以下是整合后的可运行代码，包含API请求、价格计算和页面展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <p>BTC当前价格：<span id="btc-price">-</span> USD</p>
    <p>钱包BTC余额：<span id="wallet-balance">0.001</span></p>
    <p>钱包总资产：<span id="total-value">-</span> USD</p>

    <script>
        // 接口地址
        const api_url = 'https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD';
        // 钱包余额（可根据实际情况修改）
        const balance = 0.001;

        // 获取BTC价格的异步函数
        async function getPrice() {
            const response = await fetch(api_url);
            const data = await response.json();
            // 提取USD对应的价格并转为浮点数
            return parseFloat(data.USD);
        }

        // 计算并展示结果的函数
        async function calculateAndDisplay() {
            try {
                const price = await getPrice();
                const totalValue = price * balance;

                // 更新页面内容
                document.getElementById('btc-price').textContent = price.toFixed(2);
                document.getElementById('total-value').textContent = totalValue.toFixed(2);
            } catch (error) {
                // 捕获请求或计算错误
                console.error('出错了：', error);
                document.getElementById('total-value').textContent = '获取失败';
            }
        }

        // 执行计算和展示
        calculateAndDisplay();
    </script>
</body>
</html>

关键修复说明 #

1. 统一函数名大小写，确保调用和定义一致
2. 正确提取API返回的data.USD价格值
3. 声明并赋值balance变量
4. 利用异步函数的特性，确保在获取到价格后再执行计算
5. 修复DOM元素拼写错误，添加完整的页面展示逻辑
6. 增加错误捕获，处理API请求失败的情况

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