本文讲解如何使用 javascript 实现商品购买前的资源充足性校验，确保用户只有在拥有足够宝石（gems）时才能执行购买操作，并提供可立即运行的 html + js 示例代码。
在构建网页商店（如基于宝石兑换金币的简易商城）时，一个关键交互逻辑是：禁止用户在资源不足时完成购买。这不仅提升用户体验，更是前端数据一致性的基本保障。下面我们将以“用 5 颗宝石购买 1 枚金币”为例，完整实现购买按钮的条件触发、资源扣减与错误提示。
✅ 核心逻辑说明
- 获取当前宝石余额（#balance）和金币数量（#coins）；
- 动态读取商品标价（.cost_int 元素内的数字）；
- 点击 Buy 按钮时，先比对余额是否 ≥ 成本；
- 若满足条件：扣减宝石、增加金币；
- 若不满足：弹出友好提示（也可替换为 Toast 或 DOM 内错误文案）。
? 推荐写法（现代、健壮、可扩展）
避免依赖 onclick="buycoin()" 内联事件（不利于维护与调试），改用 addEventListener 绑定事件，并增强容错处理：
<script>
// 确保 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
const balanceEl = document.querySelector('#balance');
const coinsEl = document.querySelector('#coins');
const costEl = document.querySelector('.cost_int');
const buyBtn = document.querySelector('.cost button'); // 更精准的选择器
// 安全获取数值：防止 NaN
const getBalance = () => parseInt(balanceEl.textContent) || 0;
const getCoins = () => parseInt(coinsEl.textContent) || 0;
const getCost = () => parseInt(costEl.textContent) || 0;
buyBtn.addEventListener('click', () => {
const balance = getBalance();
const cost = getCost();
if (balance < cost) {
alert(`❌ Error: You need ${cost} gems to buy this item — you only have ${balance}.`);
return;
}
// 执行交易
balanceEl.textContent = balance - cost;
coinsEl.textContent = getCoins() + 1;
// （可选）添加视觉反馈
buyBtn.style.opacity = '0.7';
buyBtn.disabled = true;
setTimeout(() => {
buyBtn.style.opacity = '1';
buyBtn.disabled = false;
}, 800);
});
});
</script>⚠️ 注意事项
- 始终校验数据类型：textContent 返回字符串，务必用 parseInt() 转换，并用 || 0 防止 NaN 导致逻辑崩溃；
- 避免内联 JS：onclick="buycoin()" 会污染 HTML 结构，且难以复用/测试；
-
扩展建议：如需支持多商品，可将 .cost_int 和按钮封装为独立
组件，通过 data-cost 和 data-item 属性解耦逻辑； - 安全边界：前端校验仅为体验优化，真实扣款必须由后端二次验证，防止恶意篡改 DOM 绕过检查。
通过以上实现，你的商店即可智能响应资源状态，既专业又可靠——让用户清楚“能买什么”，也明白“为什么不能买”。
