Javascript 如何为购物车创建数量更改功能？

这是我申请的链接

在向购物车添加内容后，单击右上角的购物车时，您将被带到该购物车页面 这是我目前尝试的数量变化功能，但我被卡住了

// quantity change
function quantityChange() {
  if (document.querySelector("btn-plus")) {
    products.inCart = products.inCart + 1;
  } else if (document.querySelector("btn-minus")) {
    products.inCart = products.inCart - 1;
  }
}

---

如果需要更多信息或代码，请告诉我。

我认为问题在于您的代码中有

文档.getElementsByClassName（'.btn plus'）

，因此对于

getElementsByClassName

您不需要“.”，但在

查询选择器中需要“.”



至于使用事件侦听器更新数量，您需要执行以下操作：

我在您的
span
中添加了一个
id
属性“quantity”，该属性包含
product.informat
。这一点很重要，因此我们可以获取对该
span
元素的引用，以便更新其
innerText
属性。

我添加了这样的代码，并验证它是否在我的机器上工作：

但是，您想在这里添加的代码会有点不同，因为通过Chrome DevTools，我无法访问您的products对象。
你会想要这样的

document.querySelector（'.btn plus'）.addEventListener（'click'，（）=>{
const quantityText=document.querySelector（“#quantity”）；
quantityText.innerText=`${products.innerText++}`；
});
你可以这样做

步骤1:将
displayCart
功能更改为：
函数displayCart（）{
让cartItems=localStorage.getItem（“productsInCart”）；
cartItems=JSON.parse（cartItems）；
控制台日志（cartItems）；
让cartContainer=document.querySelector（“.products”）；
让cartCost=localStorage.getItem（“totalCost”）；
if（cartItems和cartContainer）{
cartContainer.innerHTML=“”；
Object.values（cartItems）.map（（产品）=>{
cartContainer.innerHTML+=`
${products.name}
$${products.price}
${products.incontat}
$${products.price*products.INVOT}
`;
});
cartContainer.innerHTML+=`
篮子总数：
$${cartCost}.00
`;
}
}






步骤2:将
数量更改功能更改为：
函数数量更改（）{
const plusBtnNew=document.querySelector（“.btn plus”）；
const minusBtnNew=document.querySelector（“.btn减号”）；
const curItems=document.querySelector（“.curItems”）；
plusBtnNew.addEventListener（“单击”，（）=>{
const total=Number（localStorage.getItem（“cartNumbers”）；
localStorage.setItem（“cartNumbers”，总计+1）；
curItems.textContent=总计+1；
});
minusBtnNew.addEventListener（“单击”，（）=>{
const total=Number（localStorage.getItem（“cartNumbers”）；
setItem（“CartNumber”，总计-1）；
curItems.textContent=总计-1；
});
}






最终
store.js
code:
const sizeBtn=document.querySelector（“.btn-group1”）；
const showcase=document.querySelector（“.showcase”）；
let carts=document.queryselectoral（“添加到购物车”）；
让收藏夹=document.queryselectoral（“收藏夹”）；
console.log（收藏夹）；
让产品=[
{
名称：“拉链连帽运动衫”，
标签：
"https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/front.webp",
价格：50.0，
化身：0，
},
];
//添加到购物车
for（设i=0；i{
编号（产品[i]）；
总成本（产品[i]）；
});
}
函数onLoadCartNumber（）{
让productNumbers=localStorage.getItem（“cartNumbers”）；
if（产品编号）{
document.querySelector（“span.navbarCart”）.textContent=产品编号；
}
}
//添加到购物车的项目数
功能编号（产品）{
让productNumbers=localStorage.getItem（“cartNumbers”）；
productNumbers=parseInt（productNumbers）；
if（产品编号）{
setItem（“CartNumber”，ProductNumber+1）；
document.querySelector（“span.navbarCart”）.textContent=productnumber+1；
}否则{
localStorage.setItem（“cartNumbers”，1）；
document.querySelector（“span.navbarCart”）.textContent=1；
}
设置项目（产品）；
}
//最爱
for（设i=0；i{
favItems（产品[i]）；
总成本（产品[i]）；
});
}
函数onLoadFavNumber（）{
让favNumbers=localStorage.getItem（“favItems”）；
if（favNumbers）{
document.querySelector（“span.favoritesunt”）.textContent=favNumbers；
}
}
//添加的收藏夹数
功能favItems（产品）{
让favNumbers=localStorage.getItem（“favItems”）；
favNumbers=parseInt（favNumbers）；
if（favNumbers）{
setItem（“favItems”，favNumbers+1）；
console.log（favNumbers）；
document.querySelector（“span.favoritesunt”）.textContent=favNumbers+1；
}否则{
setItem（“favItems”，1）；
document.querySelector（“span.favoritesunt”）.textContent=1；
}
设置项目（产品）；
}
功能集合项（产品）{
让cartItems=localStorage.getItem（“productsInCart”）；
cartItems=JSON.parse（cartItems）；
如果（cartItems！=null）{
if（cartItems[products.Tag]==未定义）{
cartItems={
…手推车项目，
[产品.标签]：产品，
};
}
cartItems[products.Tag].Informat+=1；
}否则{
products.t=1；
cartItems={
[产品.标签]：产品，
};
}
setItem（“productsInCart”，JSON.stringify（cartItems））；
}
功能总成本（产品）{
让cartCost=localStorage.getItem（“totalCost”）；
如果（成本！=null）{
cartCost=parseFloat（cartCost）；
localStorage.setItem（“totalCost”，cartCost+products.price）；
}否则{
localStorage.setItem（“总成本”