每次单击按钮时如何更改价格值？

Question

我现在正在制作一个简单的网上商店，我正在 javascript 中实现一个购物车。我想调用我的函数 productTotalPrice()，它会给出该商品的总价（商品价格 * 数量）。每次单击按钮（递增按钮、递减和删除按钮）时，我都想更新总价。这是我的 productTotalPrice()。我是 Javascript 3 天前开始的，所以任何建议都很好！

// total price per item calculator
function productTotalPrice() {
    var cartItems = document.getElementsByClassName("cart-list");
    var products = document.getElementsByClassName("product");
    for (var i = 0; i <= cartItems.length; i++) {
        // Please improve this if you can!!
        var product = products[i];
        var productdetail = product.children[2];
        var priceElement = productdetail.children[3];
        var productPrice = parseFloat(priceElement.innerText.replace("€", ""));
        var productQuantity = document.getElementsByClassName("cost")[i].value;
        var priceXquantity = productPrice * productQuantity;
        var price = "€" + priceXquantity;
        document.getElementsByClassName("price")[i].innerText = price;
    }
}

var removeCartItemButtons = document.getElementsByClassName('vknop');

for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i];
    button.addEventListener('click', function(event) {
        var buttonClicked = event.target;
        buttonClicked.parentElement.parentElement.remove();
        productTotalPrice();
    })
}

<div class="cart-list">
        <!-- Product #1 -->
        <div class="product">
          <div>
            <p class="vknop" type="button">X</p>
          </div>

          <div class="image">
            <img src="images/mask1.png" alt="mask">
          </div>

          <div class="detail">
            <p>Mask1</p>
            <p>Color:Green</p>
            <p>size:S</p>
            <p>€10.99</p>
          </div>

          <div class="quantity">
            <button class="add" type="button" name="button">
              +
            </button>
            <input class="cost" type="text" name="amount" value="1" id="qtybox">
            <button class="remove" type="button" name="button">
              -
            </button>
          </div>

          <div class="price"></div>
        </div>

Answer 1

您的代码实现的逻辑是正确的，按钮按预期工作

但是每次单击按钮以显示购物车价值的变化时都必须刷新页面的问题或者没有项目可以通过使用异步 Javascript ( AJAX ) 而不是基本的 JS 来修复。

你的代码应该修改为从后台获取异步输入或不从后台获取异步输入（以防用户滚动页面而不是与页面交互）

您可以了解更多 AJAX here

Answer 2

这是我的for循环条件。必须是 products.length 而不是 cartItems.length.Thank 大家。

每次单击按钮时如何更改价格值？

How do I chage price value every time I click button?

html

javascript

function

onclick

web-site-project