js购物车数量加减代码

以下是一个简单的 JavaScript 购物车数量加减的代码示例：

HTML 部分：

<div>
  <button id="decrease">-</button>
  <input type="text" id="quantity" value="1">
  <button id="increase">+</button>
</div>

JavaScript 部分：

// 获取元素
const decreaseBtn = document.getElementById('decrease');
const increaseBtn = document.getElementById('increase');
const quantityInput = document.getElementById('quantity');

// 减少数量
decreaseBtn.addEventListener('click', () => {
  let quantity = parseInt(quantityInput.value);
  if (quantity > 1) {
    quantity--;
    quantityInput.value = quantity;
  }
});

// 增加数量
increaseBtn.addEventListener('click', () => {
  let quantity = parseInt(quantityInput.value);
  quantity++;
  quantityInput.value = quantity;
});

基础概念：这段代码主要运用了 DOM 操作和事件监听来实现购物车数量的加减功能。

优势：

简单直观，易于理解和实现。
可以实时响应用户的操作，提升用户体验。

类型：这是一种基于前端 JavaScript 的交互功能实现。

应用场景：适用于电商网站、在线商城等需要用户自主调整商品数量的场景。

常见问题及解决方法：

数量输入不合法（如输入字母）：可以在输入框的 input 事件中添加验证逻辑，确保输入的是数字。

quantityInput.addEventListener('input', () => {
  let quantity = parseInt(quantityInput.value);
  if (isNaN(quantity)) {
    quantityInput.value = 1;
  }
});