Calculating the total of my purchase items

Question

i want to calculate the total of my purchase items by adding the sum of the purchases for each item(For exp: 2 shoes * price unit + 1 tshit * price unit) in front of "Shopping Bag total :"

here a description image :

i already written a fonctionnal code that add/ remove products and also calculate the total purchase for each item. The last part of the code which is calculating the sum of my total purchase is not working.I'm confused and i don't know how to solve it.

Here the html5 code:

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

Here the JS code:

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

i just add

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

inside of your click event and all will work good

                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;

Put it in a reasonable function and call this function on every change (plus, minus).