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

【问题标题】：How do I chage price value every time I click button?每次单击按钮时如何更改价格值？
【发布时间】：2021-01-10 16:58:05
【问题描述】：

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

// 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>

【问题讨论】：

您当前的代码不工作了吗？看起来你拥有的代码会做你想做的事。究竟是什么问题？
似乎有什么问题？
提供与之配套的html
@dillon 问题是价格只有在我重新加载页面时才会发生变化。每次点击按钮后我都想更改价格。
@paroxyzm 问题是价格只有在我重新加载页面时才会发生变化。每次单击按钮后，我都想更改价格。我在一个函数中调用我的函数。当我单击一个符合检查员控制台的按钮时，我收到此错误。 “未捕获的 TypeError：productTotalPrice 不是函数”

标签： javascript html function onclick web-site-project

【解决方案1】：

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

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

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

您可以了解更多关于 AJAX here

【讨论】：

【解决方案2】：

它在我的 for 循环条件下。它必须是 products.length 而不是 cartItems.length。谢谢大家。

【讨论】：