在用javascript制作购物车时，我被购物车中已有的功能卡住了？答案

【问题标题】：while making a shopping cart in javascript i am stuck with a function already in cart?在用javascript制作购物车时，我被购物车中已有的功能卡住了？
【发布时间】：2020-09-30 06:09:41
【问题描述】：

var products = [

  ["Product1", 1, "100", "1"],
  ["Prodict2", 1, "99", "2"],
  ["Product3", 1, "60", "3"],
  ["Product4", 1, "50", "4"],


];

function displayProducts() {
  //alert('page');
  var productdata = "<div class='w3-container ' style='margin:50px 0;'>";

  for (i = 0; i < products.length; i++) {
    productdata += "<div class='w3-third'><div class='w3-row-padding w3-card w3-container w3-padding-32  w3-center'>" + products[i][0] + "<br> Rs " + products[i][2] + "<br> <button class='w3-btn w3-green w3-round'onclick='addtocart(" + i + ")'>Add to cart</button></div></div>";
  }
  productdata += "</div>";

  document.getElementById('display').innerHTML = productdata;

}


function addtocart(a) {
  cart.push(products[a]);
  if (products[a] == cart[a]) {
    alert("already in cart");
  }
  displaycart();
}



var cart = [];




function displaycart() {
  cartdata = '<table class="w3-table w3-centered w3-border w3-bordered w3-hoverable"><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th><th>Delete</th></tr>';


  var Subtotal = 0;

  for (i = 0; i < cart.length; i++) {

    Subtotal += cart[i][1] * cart[i][2]
    cartdata += "<tr><td>" + cart[i][0] + "</td><td><button class='w3-green w3-btn w3-circle' onclick= 'lessqty(" + i + ")'> - </button> " + cart[i][1] + " <button class='w3-green w3-btn w3-circle' onclick= 'addqty(" + i + ")'>+</button></td><td>" + cart[i][2] + "</td><td>" + cart[i][1] * cart[i][2] + "</td><td><button class='w3-btn w3-red ' onclick='delElement(" + i + ")'>????️   </button></td></tr>"
  }
  cartdata += '<tr><td></td><td></td><td></td><td><b>' + Subtotal + '</b></td><td></td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function delElement(a) {
  cart.splice(a, 1);
  displaycart();
}

function addqty(a) {
  cart[a][1] = cart[a][1] + parseInt(1);

  displaycart();
}

function lessqty(a) {
  cart[a][1] = cart[a][1] - parseInt(1);
  if (cart[a][1] == 0) {

    alert('quantity cannot be zero!');
    cart[a][1] = parseInt(1);
  }
  displaycart();
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body onload="displayProducts()">
  <div class="" id="display" style="max-width:800px; margin:auto;"></div>
  <div class="" id="cart"></div>
</body>

如果用户尝试在购物车中添加类似产品两次，它应该向用户显示一条错误消息但不确定如何将它与购物车中的数组值进行比较我尝试了 addtocart() 函数中的具体内容，但它没有给出正确的输出

请建议我如何检查产品是否已在购物车中

提前致谢

【问题讨论】：

您好！快速浏览一下，有两件事：-看起来您正在将商品添加到购物车之前您检查它是否在购物车中-而且您只检查您刚刚输入的商品（即if product[a] == cart[a])。您可能应该检查 product[a] 是否在购物车中，因为您只是将一件商品与其本身进行比较

标签： javascript arrays multidimensional-array shopping-cart

【解决方案1】：

您没有检查产品是否已正确放入购物车。根据您的示例数据，您应该检查购物车中的任何条目是否与正在添加的产品具有相同的产品名称：

function addtocart(a) {
  if (cart.some(p => p[0] == products[a][0])) {
    alert("already in cart");
  } else {
    cart.push(products[a]);
  }
  displaycart();
}

另请注意，您不应将其添加到购物车除非该产品尚未在购物车中。

演示：

var products = [
  ["Product1", 1, "100", "1"],
  ["Product2", 1, "99", "2"],
  ["Product3", 1, "60", "3"],
];

function displayProducts() {
  //alert('page');
  var productdata = "<div class='w3-container ' style='margin:50px 0;'>";

  for (i = 0; i < products.length; i++) {
    productdata += "<div class='w3-third'><div class='w3-row-padding w3-card w3-container w3-padding-32  w3-center'>" + products[i][0] + "<br> Rs " + products[i][2] + "<br> <button class='w3-btn w3-green w3-round'onclick='addtocart(" + i + ")'>Add to cart</button></div></div>";
  }
  productdata += "</div>";

  document.getElementById('display').innerHTML = productdata;

}


function addtocart(a) {
  if (cart.some(p => p[0] == products[a][0])) {
    alert("already in cart");
  } else {
    cart.push(products[a]);
  }
  displaycart();
}



var cart = [];




function displaycart() {
  cartdata = '<table class="w3-table w3-centered w3-border w3-bordered w3-hoverable"><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th><th>Delete</th></tr>';


  var Subtotal = 0;

  for (i = 0; i < cart.length; i++) {

    Subtotal += cart[i][1] * cart[i][2]
    cartdata += "<tr><td>" + cart[i][0] + "</td><td><button class='w3-green w3-btn w3-circle' onclick= 'lessqty(" + i + ")'> - </button> " + cart[i][1] + " <button class='w3-green w3-btn w3-circle' onclick= 'addqty(" + i + ")'>+</button></td><td>" + cart[i][2] + "</td><td>" + cart[i][1] * cart[i][2] + "</td><td><button class='w3-btn w3-red ' onclick='delElement(" + i + ")'>?️   </button></td></tr>"
  }
  cartdata += '<tr><td></td><td></td><td></td><td><b>' + Subtotal + '</b></td><td></td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function delElement(a) {
  cart.splice(a, 1);
  displaycart();
}

function addqty(a) {
  cart[a][1] = cart[a][1] + parseInt(1);

  displaycart();
}

function lessqty(a) {
  cart[a][1] = cart[a][1] - parseInt(1);
  if (cart[a][1] == 0) {

    alert('quantity cannot be zero!');
    cart[a][1] = parseInt(1);
  }
  displaycart();
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body onload="displayProducts()">
  <div class="" id="display" style="max-width:800px; margin:auto;"></div>
  <div class="" id="cart"></div>
</body>

【讨论】：