如何用JavaScript实现商店余额不足禁止购买的最小可行功能

首先修正你HTML里的一个小问题：div id="coins" 和 span id="coins" 使用了相同的ID，这会导致JS获取元素出错，把span的ID改成coin-count。

接下来编写buycoin()函数，实现核心逻辑：

function buycoin() {
    // 获取页面元素
    const balanceElement = document.getElementById('balance');
    const coinCountElement = document.getElementById('coin-count');
    const costElement = document.querySelector('.cost_int');

    // 转换为数字类型，避免字符串运算错误
    const currentBalance = parseInt(balanceElement.textContent);
    const coinCost = parseInt(costElement.textContent);
    let currentCoins = parseInt(coinCountElement.textContent);

    // 余额检查逻辑
    if (currentBalance < coinCost) {
        alert('Error: you do not have enough gems to buy a coin.');
        return;
    }

    // 执行购买操作并更新页面显示
    balanceElement.textContent = currentBalance - coinCost;
    currentCoins += 1;
    coinCountElement.textContent = currentCoins;
}

代码说明 #

• 先获取页面上显示余额、硬币数量和物品价格的DOM元素
• 将文本内容转为整数，防止出现字符串拼接式的错误计算
• 优先判断宝石余额是否不足，若不足则弹出指定错误提示并终止函数，阻止购买
• 余额足够时，扣除对应宝石数量、增加硬币数量，并同步更新页面上的数值显示

修正后的HTML关键片段（仅修改重复ID部分） #

<div id="coins">
    Coins: <span id="coin-count">0</span>
</div>

把上述JavaScript代码放到你的HTML文件的<script>标签中（建议放在</body>标签之前），即可实现需求功能：当宝石余额不足时，点击购买按钮会弹出错误提示，且不会执行购买操作；余额充足时则正常完成兑换。

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