Javascript 购物车中的产品副本

我的购物车功能有一个简单的问题。单击“添加到购物车”按钮后，如果它具有相同的产品ID，它将在新行中输出一个新产品。如果产品ID相同，则只需增加产品的数量即可。

const-products=[]；
常量车=[]；
常量输入={
id:document.getElementById（“产品id”），
desc:document.getElementById（“产品描述”），
数量：document.getElementById（“数量”），
价格：document.getElementById（“价格”）
};
const productsTable=document.getElementById（“产品表”）；
const cartsTable=document.getElementById（“carts表”）；
函数renderProductsTable（）{
//删除所有条目
from（productsTable.children）.slice（1.forEach（entry=>productsTable.removeChild（entry））；
对于（产品中的产品）{
const tr=document.createElement（'tr'）；
const id=document.createElement（'td'）；
id.textContent=product.id；
const desc=document.createElement（'td'）；
desc.textContent=product.desc；
常量数量=document.createElement（'td'）；
qty.textContent=产品数量；
const price=document.createElement（'td'）；
price.textContent=product.price；
const action=document.createElement（'td'）；
constdeletebutton=document.createElement（'button'）；
deleteButton.textContent='Delete'；
deleteButton.addEventListener（'单击'，（）=>removeProduct（product.id））
const addToCartButton=document.createElement（'button'）；
addToCartButton.textContent='添加到购物车'；
addToCartButton.addEventListener（'单击'，（）=>addCart（product.id））；
action.appendChild（删除按钮）；
动作.appendChild（addToCartButton）；
tr.appendChild（id）；
tr.appendChild（desc）；
tr.appendChild（数量）；
tr.appendChild（价格）；
tr.儿童（行动）；
productsTable.appendChild（tr）；
}
}
函数addProduct（）{
常数乘积={
id:inputs.id.value，
desc:inputs.desc.value，
数量：数量（输入数量值），
价格：数字（输入.价格.值）
};
让existing=products.find（item=>item.id==product.id）；
如果（现有）{
现有数量+=产品数量；
} 
否则{
产品。推（产品）；
}
renderProductsTable（）；
document.getElementById（'order'）.reset（）；
}
功能移除产品（产品标识）{
const index=products.findIndex（p=>p.id==product\u id）；
产品.拼接（索引1）；
renderProductsTable（）；
}
功能addCart（产品标识）{
const product=products.find（p=>p.id==product\u id）；
const cartItem=carts.find（c=>c.product==product）；
如果（项目）{
cartItem.qty++；
}
否则{
推车推（产品）；
}
renderCartTable（）；
}
函数renderCartTable（）{
用于（手推车）{
const tr=document.createElement（'tr'）；
const id=document.createElement（'td'）；
id.textContent=cart.id；
const desc=document.createElement（'td'）；
desc.textContent=cart.desc；
常量数量=document.createElement（'td'）；
qty.textContent=购物车数量；
const price=document.createElement（'td'）；
price.textContent=cart.price；
const total=document.createElement（'td'）；
total.textContent=购物车数量*购物车价格
const action=document.createElement（'td'）；
const subtractButton=document.createElement（“按钮”）；
Subtract button.textContent='Subtract Quantity'；
const addButton=document.createElement（'button'）；
addButton.textContent='添加数量'；
const removeButton=document.createElement（'button'）；
removeButton.textContent='Remove Item'；
tr.appendChild（id）；
tr.appendChild（desc）；
tr.appendChild（数量）；
tr.appendChild（价格）；
tr.儿童（总数）；
tr.儿童（行动）；
附肢儿童（tr）；
}
}

购物车ES6
产品标识：
产品说明：
数量：
价格：
产品ID
产品说明
量
价格
行动


购物车
产品ID
产品说明
量
价格
总金额
行动

因此，当前您的代码设置为在将产品添加到产品表时删除所有产品，但在将产品添加到购物车时不执行相同的操作。因此，只需添加它就可以删除购物车表中的所有内容

Array.from(cartsTable.children).slice(1).forEach(entry => cartsTable.removeChild(entry));

但是，您当前的代码nl存在一些小问题：

• 如果添加两次相同的产品id，则不会验证价格或描述是否相同
• 如果将产品添加到carts表中，则只会将数量增加1，但是，产品本身可能设置了更高的数量，因此可以像这样进行修复

  function addCart(product_id) {
    const product = products.find(p => p.id === product_id);
    const cartItem = carts.find(c => c.product === product);
  
    if(cartItem) {
      cartItem.qty += product.qty;
    }
    else {
      carts.push(product);
    }
    renderCartTable();
  }
  

• 您可以使用
  获取产品数量

• 您可以对价格字段使用

• 从products表中删除项目后，产品在购物车中不再可用，因此您也应该添加一个从购物车中删除产品的调用
• 您有两个创建表的函数，这两个函数都可以通用以共享相同的功能

我已经重写了您描述的函数，使用了我已经给出的答案，它将基于给定的列和包含数据的数组创建一个表

它仍然存在一个问题，即在添加相同的产品时，它不会验证描述/价格的差异，但它有助于解决我提到的所有其他问题

但是，代码可能要长一点，部分原因是table helper函数可以做很多工作