HTML JavaScript商品数量修改异常：仅能修改首个商品

数据老陈

2026-8-16

问题根源

你代码里的核心问题是所有数量输入框都用了同一个ID 'need'——HTML规范里ID必须是唯一的，document.getElementById('need')永远只会返回页面上第一个带这个ID的元素。所以你修改第二个输入框时，函数里拿到的还是第一个输入框的数值，自然只会更新第一个商品的数据。

修复方案

1. 给每个输入框绑定唯一的商品标识

创建输入框时，不要用固定的ID，而是给每个输入框添加**数据属性（dataset）**存储对应商品的索引，同时把ID设成唯一值（可选，但更规范）：

const input = document.createElement('input');
input.type = 'number';
input.value = element.quantity;

// 用data-index存储当前商品在wishlist里的索引
input.dataset.index = index;
// 给ID加索引后缀，保证唯一性
input.setAttribute('id', `need-${index}`);

input.addEventListener('change', changeQuantity);

2. 修改changeQuantity函数，获取当前输入框对应的商品

在事件函数里，通过event.target拿到触发事件的输入框，再从dataset里取索引，这样就能精准定位到要修改的商品：

function changeQuantity(e) {
  const currentInput = e.target;
  // 从data-index里解析出商品索引
  const itemIndex = Number(currentInput.dataset.index);
  const quantity = Number(currentInput.value);

  if (quantity === 0) {
    // 注意这里要把索引传给removeItem，确保删除正确的商品
    removeItem(itemIndex);
  } else {
    wishlist[itemIndex].quantity = quantity;
    localStorage.setItem('wishlist', JSON.stringify(wishlist));
    displayData(wishlist);
  }
}