求助：实现商品页加减按钮功能的JavaScript方案

假设你的PHP生成的商品数量区域HTML结构大概是这样（如果和实际结构有差异，仅需对应修改选择器即可）：

<div class="quantity-control">
  <button class="btn-minus">-</button>
  <input type="number" class="quantity-input" value="1" min="1">
  <button class="btn-plus">+</button>
</div>

下面是实现交互的JavaScript代码，直接放在页面底部或外部JS文件中即可：

// 获取页面上的加减按钮和数量输入框
const minusBtn = document.querySelector('.btn-minus');
const plusBtn = document.querySelector('.btn-plus');
const quantityInput = document.querySelector('.quantity-input');

// 绑定减号按钮点击事件
minusBtn.addEventListener('click', function() {
  let currentNum = parseInt(quantityInput.value);
  // 确保数量不会小于1
  if (currentNum > 1) {
    quantityInput.value = currentNum - 1;
  }
});

// 绑定加号按钮点击事件
plusBtn.addEventListener('click', function() {
  let currentNum = parseInt(quantityInput.value);
  quantityInput.value = currentNum + 1;
});

代码说明： #

• document.querySelector：根据类名定位页面元素，替换成你实际使用的类名/ID即可适配自己的页面结构
• addEventListener：给按钮绑定点击触发的逻辑
• parseInt：把输入框的字符串值转为数字，保证加减计算正常
• 减号按钮加了判断逻辑，避免商品数量降到1以下，符合常规电商场景需求

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