Подсчет суммы моих покупок - PullRequest
Новая
       0

Подсчет суммы моих покупок

0 голосов
/ 01 января 2019

Я хочу рассчитать общее количество моих покупок, добавив сумму покупок для каждого товара (для опыта: 2 туфли * единица цены + 1 цена * единица цены) перед "Сумка для покупок":

здесь описание изображения: enter image description here

я уже написал функциональный код, который добавляет / удаляет продукты, а также рассчитывает общую сумму покупки для каждого элемента.Последняя часть кода, которая вычисляет сумму моей общей покупки, не работает. Я запуталась и не знаю, как ее решить.

Вот код 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;

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Я просто добавлю 

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>
0 голосов
/ 01 января 2019 
const results = document.querySelectorAll('.result-btn');
let total = 0;

results.forEach((result) => {

   total += result.value

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

Поместите его в разумную функцию и вызывайте эту функцию при каждом изменении (плюс, минус).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...