购物车的addButton和removeButton事件

如何解决购物车的addButton和removeButton事件

我是计算机科学专业的学生。我的问题是关于HTML和JavaScript的。好吧，首先，我要用HTML，CSS和JavaScript创建我的第一个网上商店。我用js把产品放到了一个弹出式购物车中。因此，如果我按下“添加到购物车”按钮，则该文章将被设置为已创建的div。效果很好，我也可以通过按钮将其删除。我还为每个按钮添加了一个脚本文件，以在单击后更改文本和颜色。这意味着，如果单击“添加到购物车”按钮，它将文本更改为“添加到购物车”，并将按钮设置为颜色“红色”。效果很好。

现在，如果我从购物车中删除商品，我想将按钮的文本更改回第一个条件。另外，我希望将颜色从“红色”更改为黑色，因为商品已不在购物车中。单击按钮“添加到购物车”的问题在于，使用按钮生成了“ div”，但是没有唯一的ID。这意味着，如果我单击article01的按钮“ remove item”，则最后一个按钮（article08）的颜色和文本将更改，而不是article01的颜色。

将按钮的颜色和文本更改为js需要特定的ID。但是，当使用按钮创建“ div”时，“删除项目”按钮不会获得唯一的“ id”，并且js无法对其进行寻址。通常，单击文章的删除按钮应将本文的“添加到购物车”按钮重置。

Here's a video preview of the shop:

//这是从行中“删除”文章按钮的HTML代码，用于重置“添加到购物车”按钮：

<div class="cart-item cart-column">
        <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
        <span class="cart-item-title">${title}</span>
    </div>
    <span class="cart-price cart-column">${price}</span>
    <div onclick="btnColorDanger()" class="cart-quantity cart-column">
        <input class="cart-quantity-input" type="number" value="1" readonly>
        <button class="btn btn-danger downCounter" type="button" onclick="minus(),addedDanger()">REMOVE</button>
    </div>`

解决方案可以在这里吗？！在“使用按钮创建div”行中

//这是用于在购物车中创建行的脚本：

function addItemToCart(title,price,imageSrc) {
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
    if (cartItemNames[i].innerText == title) {
        alert('This item is already added to the cart')
        return
    }
}
var cartRowContents = `
    <div class="cart-item cart-column">
        <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
        <span class="cart-item-title">${title}</span>
    </div>
    <span class="cart-price cart-column">${price}</span>
    <div onclick="btnColorDanger()" class="cart-quantity cart-column">
        <input class="cart-quantity-input" type="number" value="1" readonly>
        <button class="btn btn-danger downCounter" type="button" onclick="minus(),addedDanger()">REMOVE</button>
    </div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click',removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change',quantityChanged)}

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded',ready)
} else {
    ready()
}

function ready() {
    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('shop-item-button')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click',addToCartClicked)
    }

    /*document.getElementsByClassName('btn-purchase')[0].addEventListener('click',purchaseClicked)*/
}

function purchaseClicked() {
    alert('Thank you for your purchase')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
    addItemToCart(title,imageSrc)
    updateCartTotal()
}

function addItemToCart(title,imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('This item is already added to the cart')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div onclick="btnColorDanger()" class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1" readonly>
            <button class="btn btn-danger downCounter" type="button" onclick="minus(),addedDanger()">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click',removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change',quantityChanged)
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    var total = 0
    for (var i = 0; i < cartRows.length; i++) {
        var cartRow = cartRows[i]
        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
        var price = parseFloat(priceElement.innerText.replace('$',''))
        var quantity = quantityElement.value
        total = total + (price * quantity)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}

// Change Add to Cart to --> Allready Added
function added1() {
    var x = document.getElementById("upCounter1");
    x.innerHTML === "ADD TO CART"
    x.innerHTML = "ALLREADY ADDED!";
}
// Change Allready Added to --> Add to Cart
function addedDanger() {
    var x = document.getElementById("upCounter");
    x.innerHTML === "ALLREADY ADDED!"
    x.innerHTML = "ADD TO CART";
}

// counter
var count = 0;
var countEl = document.getElementById("count");
function plus(){
    count++;
    countEl.value = count;
}
function minus(){
  if (count > 0) {
    count--;
    countEl.value = count;
  }  
}
// Article 1
function btnColor1() { 
    document.getElementsByClassName("btn-color01")[0].style.backgroundColor = "red"; 
}

body {
background-color: grey;
}

/*Div Card*/
.card {
  background-color: rgba(0,0.8);
  box-shadow: 0 4px 8px 0 rgba(0,0.2);
  max-width: 175px;
  height: 100%;
  text-align: center;
  font-family: arial;
}

/*shop items*/
.content-section {
  margin-bottom: 40px;
}

.container {
  max-width: 75%;
  margin: 0 auto 350px auto;
}

.section-title {
  text-align: center;
  color: white;
  font-size: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.btn {
  border: none;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 50px;
  font-size: 18px;
}

.btn:hover {
  background-color: rgba(56,117,202,0.9);
}

.btn-primary {
  margin: 0 auto;
  border: none;
  padding: 12px;
  color: white;
  background-color: skyblue;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.btn-primary:hover {
  opacity: 0.8;
}

.shop-item {
  margin: 0px;
  padding: auto;
}

.shop-item-title {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  color: rgb(0,0);
  padding-top: 10px;
}

.shop-item-image {
  width: 70%;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 20px;
}

.shop-item-details {
  align-items: center;
}

.shop-item-desc{
  font-size: smaller;
  color: rgb(0,0);
}

.desc-background{
  background-color: white;
  padding-bottom: 20px;
}

.shop-item-price {
  flex-grow: 1;
  color: rgb(0,0);
  width: 100%;
  font-size: medium;
}

.shop-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto;
}

.cart-header {
  font-weight: bold;
  font-size: 1.25em;
  color: rgb(255,255,255);
}

.cart-column {
  display: flex;
  align-items: center;
  border-bottom: 1px solid black;
  margin-right: 1.5em;
  padding-bottom: 10px;
  margin-top: 10px;
}

.cart-row {
  display: flex;
  color: white;
}

.cart-item {
  width: 45%;
}

.cart-price {
  width: 20%;
  font-size: 1.2em;
  color: rgb(255,255);
  text-align: center;
}

.cart-quantity {
  width: 35%;
}

.cart-item-title {
  color: rgb(255,255);
  margin-left: .5em;
  font-size: 1.2em;
}

.cart-item-image {
  width: 75px;
  height: auto;
  border-radius: 10px;
}

.btn-danger {
  color: white;
  background-color: #EB5757;
  border: none;
  width: 75px;
  height: 30px;
  font-size: smaller;
  float: right;
  margin: 0 auto;
}

.btn-danger:hover {
  background-color: #CC4C4C;
}

.cart-quantity-input {
  height: 25px;
  width: 40px;
  border: 1px solid #ffffff;
  background-color: rgb(0,0);
  color: rgb(255,255);
  padding: 0;
  text-align: center;
  font-size: 1.2em;
  margin: 0 auto;
}

.cart-row:last-child {
  border-bottom: 1px solid rgb(255,255);
}

.cart-row:last-child .cart-column {
  border: none;
}

.cart-total {
  text-align: end;
  margin-top: 10px;
  margin-right: 10px;
}

.cart-total-title {
  font-weight: bold;
  font-size: 1.5em;
  color: rgb(255,255);
  margin-right: 20px;
}

.cart-total-price {
  color: rgb(255,255);
  font-size: 1.1em;
}

footer {
  margin-top: 400px;
}

.divCart {
  margin-top: 25px;
  float: right;
  font-size: 20px;
  margin-left: 38px;
}

.hide {
  display: block;
}

.set{
  color: white;
}

#count {
  width: 20px;
  text-align: center;
  background-color: transparent;
  color: white;
  float: left;
  border: solid 2px red;
  border-radius: 50px;
  margin-top: -35px;
  background-color: red;
}

<!-- ShopItems -->
<div class="shop-item">
                <div class="card">
                    <img class="shop-item-image" src="../files/products/articles/dresser/dresser.png">
                    <div class="shop-item-details">
                        <div class="desc-background">
                            <span class="shop-item-title">Article 1</span>
                            <p>Description:</p>
                            <p class="shop-item-desc">Lorem ipsum dolor sit amet,consetetur sadipscing elitr.</p>
                            <span class="shop-item-price">$12.99</span>
                        </div>
                        <button class="btn shop-item-button btn-color01" id="upCounter1" type="button" onclick="plus(),added1(),btnColor1()" value="Added to Cart">ADD TO CART</button>
                    </div>
                </div>
            </div>

<!-- Shopping cart popup -->

    <!-- The Modal -->
    <div id="myModalPopup" class="modalPopup">

        <!-- Modal content -->
        <div class="modal-contentPopup">
            <span class="closePopup">&times;</span>
            <!-- Cart -->
            <section class="content-section">
                <h2 class="section-header">CART</h2>
                <div class="cart-row">
                    <span class="cart-item cart-header cart-column">ITEM</span>
                    <span class="cart-price cart-header cart-column">PRICE</span>
                    <span class="cart-quantity cart-header cart-column">QUANTITY</span>
                </div>
                <div class="cart-items">
                </div>
                <div class="cart-total">
                    <strong class="cart-total-title">Total</strong>
                    <span class="cart-total-price">$0</span>
                </div>
                <div class="button-purchase"><button class="btn-primary upCounter" type="button" id="btnReduce">PURCHASE</button></div>
            </section>
        </div>
    </div>

购物车的addButton和removeButton事件

如何解决购物车的addButton和removeButton事件

相关推荐