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