Question

我想通过在“购物袋总计：”前面加上每个商品的购买总和（例如：2鞋*价格单位+ 1 tshit *价格单位）来计算我的购买商品总数，

此处为描述图片：

我已经写了一个功能代码，可以添加/删除产品，还可以计算每个商品的购买总额。计算我总购买金额的代码的最后一部分不起作用。我很困惑，我不知道如何解决它。

这是html5代码：

<div class="shopping-cart">
      <!-- Title -->
      <div class="title">
        Shopping Bag total : <input type="number" value="0" class="total-result-input" />
      </div>

      <!-- Product #1 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-1.png" alt="" />
        </div>

        <div class="description">
          <span>Common Projects</span>
          <span>Bball High</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button""><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>

        </div>

        <div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>

      </div>

      <!-- Product #2 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-2.png" alt=""/>
        </div>

        <div class="description">
          <span>Maison Margiela</span>
          <span>Future Sneakers</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
        </div>

        <div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
      </div>

      <!-- Product #3 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-3.png" alt="" />
        </div>

        <div class="description">
          <span>Our Legacy</span>
          <span>Brushed Scarf</span>
          <span>Brown</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button" ><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
        </div>

        <div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
      </div>
    </div>

这是JS代码：

var items = document.querySelectorAll('.item');

items.forEach(function(item) {
  var minusButton = item.querySelector('.minus-btn');
  var plusButton = item.querySelector('.plus-btn');
  var inputField = item.querySelector('.input-btn');
  var resultField = item.querySelector('.result-btn');  

  minusButton.addEventListener('click', function minusProduct() {
    var currentValue = Number(inputField.value);
    if (currentValue > 0) {
      inputField.value = currentValue - 1;
      var x = item.querySelector('.total-price').id;
      resultField =  item.querySelector('.result-btn').value = x* inputField.value;
    } else inputField.value = 0

  });

  plusButton.addEventListener('click', function plusProduct() {
    var currentValue = Number(inputField.value);
    if (currentValue < 100) {
    inputField.value = currentValue + 1;
   var x = item.querySelector('.total-price').id;
   resultField = item.querySelector('.result-btn').value = Number(x)* Number(inputField.value);
  } else inputField.value = 100
  });

});

const results = document.querySelectorAll('.result-btn');
let total = 0;

results.forEach((result) => {

  total += result.value

});

document.querySelector('.total-result-input').value = total;

Answer 1

我只需添加

document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)

在您的click事件中，一切都会很好

                var items = document.querySelectorAll('.item');

                items.forEach(function(item) {
                    var minusButton = item.querySelector('.minus-btn');
                    var plusButton = item.querySelector('.plus-btn');
                    var inputField = item.querySelector('.input-btn');
                    var resultField = item.querySelector('.result-btn');

                    minusButton.addEventListener('click', function minusProduct() {
                        var currentValue = Number(inputField.value);
                        if (currentValue > 0) {
                            inputField.value = currentValue - 1;
                            var x = item.querySelector('.total-price').id;
                            resultField = item.querySelector('.result-btn').value = x * inputField.value;

                            document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)

                        } else inputField.value = 0

                    });


                    plusButton.addEventListener('click', function plusProduct() {
                        var currentValue = Number(inputField.value);
                        if (currentValue < 100) {
                            inputField.value = currentValue + 1;
                            var x = item.querySelector('.total-price').id;
                            resultField = item.querySelector('.result-btn').value = Number(x) * Number(inputField.value);
                            document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)
                        } else inputField.value = 100
                    });



                });

                const results = document.querySelectorAll('.result-btn');
                let total = 0;

                results.forEach((result) => {

                    total += result.value

                });

                document.querySelector('.total-result-input').value = total;

    <div class="shopping-cart">
        <!-- Title -->
        <div class="title">
            Shopping Bag total : <input type="number" value="0" class="total-result-input" />
        </div>
        <!-- Product #1 -->
        <div class="item">
            <div class="buttons">
                <span class="delete-btn"></span>
                <span class="like-btn"></span>
            </div>
            <div class="image">
                <img src="item-1.png" alt="" />
        </div>
                <div class="description">
                    <span>Common Projects</span>
                    <span>Bball High</span>
                    <span>White</span>
                </div>
                <div class="quantity">
                    <button class="plus-btn" type="button" name="button"">+</button>
                    <input type=" text" value="0" class="input-btn" />
                    <button class="minus-btn" type="button" name="button">-</button>
                </div>
                <div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>
            </div>
            <!-- Product #2 -->
            <div class="item">
                <div class="buttons">
                    <span class="delete-btn"></span>
                    <span class="like-btn"></span>
                </div>
                <div class="image">
                    <img src="item-2.png" alt=""/>
        </div>
                    <div class="description">
                        <span>Maison Margiela</span>
                        <span>Future Sneakers</span>
                        <span>White</span>
                    </div>
                    <div class="quantity">
                        <button class="plus-btn" type="button" name="button">+</button>
                        <input type="text" value="0" class="input-btn" />
                        <button class="minus-btn" type="button" name="button">-</button>
                    </div>
                    <div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
                </div>
                <!-- Product #3 -->
                <div class="item">
                    <div class="buttons">
                        <span class="delete-btn"></span>
                        <span class="like-btn"></span>
                    </div>
                    <div class="image">
                        <img src="item-3.png" alt="" />
        </div>
                        <div class="description">
                            <span>Our Legacy</span>
                            <span>Brushed Scarf</span>
                            <span>Brown</span>
                        </div>
                        <div class="quantity">
                            <button class="plus-btn" type="button" name="button">+</button>
                            <input type="text" value="0" class="input-btn" />
                            <button class="minus-btn" type="button" name="button">-</button>
                        </div>
                        <div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
                    </div>
                </div>

Answer 2

const results = document.querySelectorAll('.result-btn');
let total = 0;

results.forEach((result) => {

   total += result.value

});
document.querySelector('.total-result-input').value = total;

将其放在合理的函数中，并在每次更改（正负）时调用此函数。

计算我的购买商品总数

2 个答案: