使用 vanilla javascript 更改购物车中的购物车商品数量

Question

I am building an eCommerce website with Django and I am trying to change the quantity of items in my shopping cart using pure JavaScript.我正在用 Django 构建一个电子商务网站，我正在尝试使用纯 JavaScript 更改购物车中的商品数量。

I have been able to select and click on the increase and decrease buttons using a query selector, but when I click on any of those buttons only the first item in the cart updates.我已经能够使用查询选择器选择并单击增加和减少按钮，但是当我单击这些按钮中的任何一个时，只有购物车中的第一个项目会更新。 The remaining buttons do not increase the quantity of the items associated with it.其余按钮不会增加与其关联的项目的数量。

What should I do?我该怎么办？

This is the JavaScript code:这是 JavaScript 代码：

var minusButton = document.getElementsByClassName("btn minus1")
for (var i = 0; i < minusButton.length; i++) {
minusButton[i].addEventListener("click", function(event){
var quantity = document.getElementsByClassName("cart-quantity-input")
for (var i = 0; i < quantity.length; i++) {
var quantity = quantity[i].value--
//console.log(quantity)
 }
})}

This is the HTML code:这是 HTML 代码：

<!DOCTYPE HTML> 
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cart</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/cart.css' %}">
</head>

<body>
<!-- navigation menu -->
{% include "topnav.html" %}

<div class="maincontent">
    <h1 class="hhh1" style="font-size:50px; margin:0px; margin-bottom:30px">Your Cart</h1>
    <div class="centerblock">
    <!-- DYNAMIC CONTENT GOES HERE -->
        <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">
        {% for item in items %}
            <div>
                <div class="cart-item cart-column">
                    <img class="cart-item-image" src="{{item.product.imageURL}}" width="100" height="100">
                    <span class="cart-item-title">{{item.product.title}}</span>
                </div>
                <span class="cart-price cart-column">£{{item.product.price}}</span>
                <div class="cart-quantity cart-column">
                    <div class="quantity">
                        <button data-product={{item.product.id}} data-action="remove" id="minus" class="btn minus1 update-cart">-</button>
                        <input class="cart-quantity-input quantity" type="number" id="id_form-0-quantity" name="quantity" min="1" max="5" value="{{item.quantity}}">
                        <button data-product={{item.product.id}} data-action="add" id="plus" class="btn add1 update-cart">+</button>
                        <button class="removeButton" type="button">REMOVE</button>
                    </div>
            {% endfor %}
                </div>
            </div>
            <div class="cart-total">
                <strong class="cart-total-title">Total</strong>
                <span class="cart-total-price">£{{order.get_cart_total}}</span>
            </div>
            <div class="ordersummary">
                <form action="checkout-info" method="post">
                {% csrf_token %}
                <input type="submit" value="CHECKOUT">
                </form>
            </div>
        </div>
    </div>
</div>

{% include "footer.html" %}

<script src="{% static 'js/cart.js' %}" ></script>
<!--<script src="{% static 'js/test.js' %}" ></script>-->

</body>

</html>

Answer 1

I understand that your intention is to increment or decrement the value cart-quantity-input by one with the minus1 and add1 buttons.我明白你的意图是增加或由一个与minus1和ADD1按钮减小数值车量输入。 However, on your script, for each minus1 button, you are getting all of the cart-quantity-input when you used document.getElementsByClassName (hint: it reads as for current document, get all elements with that class name ).但是，在您的脚本中，对于每个减号 1 按钮，当您使用document.getElementsByClassName时，您将获得所有的购物车数量输入（提示：它读取为当前文档，获取具有该类名的所有元素）。 To select the box next to those buttons, you need to navigate through the HTML structure.要选择这些按钮旁边的框，您需要浏览HTML 结构。 take a look at the script below:看看下面的脚本：

let deductBtnArr = document.getElementsByClassName('minus1');
let addButtonArr = document.getElementsByClassName('add1');

for(let deductBtn of deductBtnArr){
    deductBtn.onclick = function(){
        let currentInputBox = deductBtn.nextElementSibling;
        currentInputBox.value =  currentInputBox.value - 1;
    }
}

for(let addButton of addButtonArr){
    addButton.onclick = () => {
        let currentInputBox = addButton.previousElementSibling;
        currentInputBox.value =  parseInt(currentInputBox.value) + 1;
    }
}

I used element.我使用了元素。 nextElementSibling and element. nextElementSibling和元素。 previousElementSibling to tell the page that I want the element next to them, which on both cases is the cart-quantity-input box . previousElementSibling告诉页面我想要它们旁边的元素，在这两种情况下都是car-quantity-input box 。

Of course, if you add an element between the buttons and the input box, or if you encapsulate them in another element, the script above will fail.当然，如果你在按钮和输入框之间添加一个元素，或者你将它们封装在另一个元素中，上面的脚本就会失败。 There are other navigation functions that are available around.还有其他可用的导航功能。 Please check them out.请检查一下。

使用 vanilla javascript 更改购物车中的购物车商品数量

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-15 22:43:17

使用 vanilla javascript 更改购物车中的购物车商品数量

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-15 22:43:17

解决方案1
0 已采纳 2020-10-15 22:43:17