如何防止在购物车中两次添加同一产品

时间：2019-02-28 07:32:05

标签： javascript html

能否请您告诉我我在js代码中做错了什么...我正在尝试通过单击“添加到购物车”按钮来阻止两次添加相同的产品，然后提醒他该产品已在购物中添加购物车

JS代码：

function ready() {
  //REMOVE THE SHOPPING ITEM FROM THE CART

  var removeCartItemButtons = document.getElementsByClassName('btn-danger')
  for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener('click', removeCartItem)
  }

  var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    input.addEventListener('change', quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName('add-to-cart')
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
  }
}

function addToCartClicked(event) {
  event.preventDefault()
  var button = event.target
  var shopItem = button.parentElement.parentElement.parentElement.parentElement
  var title = shopItem.getElementsByClassName('shop-title')[0].innerText
  var price = shopItem.getElementsByClassName('new-price')[0].innerText
  var image = shopItem.getElementsByClassName('img')[0].src
  addItemToCart(title, price, image)
}
//Add the product to the shopping Cart
function addItemToCart(title, price, image) {
  var cartRow = document.createElement('div')
  var cartItems = document.getElementsByClassName('cart-items')[0]
  var cartItemsNames = cartItems.getElementsByClassName('cart-title')
  //prevent the same product to be added twice
  for (var i = 0; i < cartItemsNames.length; i++) {
    if (cartItemsNames[i].innerText == title) {
      alert('error')
      return
    }
  }
  var cartRowContents = `
<div class="sin-itme clearfix cart-row">
<i class="mdi mdi-close btn-danger"><a href="#"></a></i>
<a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a>
<div class="menu-cart-text">
<h5 class="cart-title">${title}</h5>
<span class="product-color">Color : Black</span>
<span class="product-size">Size : SL</span>
<label for="quantity" class="quantity-text">Quantity: </label>
<input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">

<strong class="price">${price}</strong>
</div>
</div>
`
  cartRow.innerHTML = cartRowContents
  cartItems.append(cartRow)
}
<html>

<head>
  <title>shopping cart</title>
</head>

<body>
  <div class="cart-items">
    <div class="sin-itme clearfix cart-row">
      <i class="mdi mdi-close btn-danger"></i>
      <a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a>
      <div class="menu-cart-text">
        <h5 class="cart-title">product1</h5>
        <label for="quantity" class="quantity-text">Quantity: </label>
        <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">
        <strong class="price">$12.00</strong>
      </div>
    </div>
  </div>

  <div class="row shop-item">
    <div class="col-xs-12 col-md-4">
      <div class="list-img">
        <div class="product-img">
          <div class="pro-type">
            <span>new</span>
          </div>
          <a href="#"><img src="img/products/13.jpg" class="img" alt="Product Title" /></a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-8">
      <div class="list-text">
        <h3 class="shop-title">product1</h3>
        <h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5>
        <div class="list-btn">
          <a href="#" class="add-to-cart" data-id="4">add to cart</a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

这是我做的代码...您能告诉我我在JS中做错了吗？...谢谢

1 个答案:

答案 0 :(得分：0)

代码段中的就绪功能未运行，您必须在底部调用它。

在addToCartClicked函数中，只需使用文档代替shopItem 

function addToCartClicked(event) {
  event.preventDefault()
  var title = document.getElementsByClassName('shop-title')[0].innerText
  var price = document.getElementsByClassName('new-price')[0].innerText
  var image = document.getElementsByClassName('img')[0].src
  addItemToCart(title, price, image)
}

在addItemToCart函数中，只需使用文档代替cartItems 

function addItemToCart(title, price, image) {
  var cartRow = document.createElement('div')
  var cartItemsNames = document.getElementsByClassName('cart-title')
  //prevent the same product to be added twice
  for (let i = 0; i < cartItemsNames.length; i++) {
    if (cartItemsNames[i].innerText == title) {
      alert('error')
      return
    }
  }
  // ....
  // ....
}

以上更改只是为了使您的代码更清晰。 

function ready() {
  //REMOVE THE SHOPPING ITEM FROM THE CART

  var removeCartItemButtons = document.getElementsByClassName('btn-danger')
  for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    // button.addEventListener('click', removeCartItem)
  }

  var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    // input.addEventListener('change', quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName('add-to-cart')
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
  }
}

function addToCartClicked(event) {
  event.preventDefault()
  console.log(123)
  var title = document.getElementsByClassName('shop-title')[0].innerText
  var price = document.getElementsByClassName('new-price')[0].innerText
  var image = document.getElementsByClassName('img')[0].src
  addItemToCart(title, price, image)
}
//Add the product to the shopping Cart
function addItemToCart(title, price, image) {
  var cartRow = document.createElement('div')
  var cartItemsNames = document.getElementsByClassName('cart-title')
  //prevent the same product to be added twice
  for (let i = 0; i < cartItemsNames.length; i++) {
    if (cartItemsNames[i].innerText == title) {
      alert('error')
      return
    }
  }
  var cartRowContents = `
<div class="sin-itme clearfix cart-row">
<i class="mdi mdi-close btn-danger"><a href="#"></a></i>
<a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a>
<div class="menu-cart-text">
<h5 class="cart-title">${title}</h5>
<span class="product-color">Color : Black</span>
<span class="product-size">Size : SL</span>
<label for="quantity" class="quantity-text">Quantity: </label>
<input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">

<strong class="price">${price}</strong>
</div>
</div>
`
  cartRow.innerHTML = cartRowContents
  cartItems.append(cartRow)
}
ready()
<html>

<head>
  <title>shopping cart</title>
</head>

<body>
  <div class="cart-items">
    <div class="sin-itme clearfix cart-row">
      <i class="mdi mdi-close btn-danger"></i>
      <a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a>
      <div class="menu-cart-text">
        <h5 class="cart-title">product1</h5>
        <label for="quantity" class="quantity-text">Quantity: </label>
        <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">
        <strong class="price">$12.00</strong>
      </div>
    </div>
  </div>

  <div class="row shop-item">
    <div class="col-xs-12 col-md-4">
      <div class="list-img">
        <div class="product-img">
          <div class="pro-type">
            <span>new</span>
          </div>
          <a href="#"><img src="img/products/13.jpg" class="img" alt="Product Title" /></a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-8">
      <div class="list-text">
        <h3 class="shop-title">product1</h3>
        <h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5>
        <div class="list-btn">
          <a href="#" class="add-to-cart" data-id="4">add to cart</a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

相关问题
最新问题