Калькулятор корзины

Тема в разделе "JavaScript", создана пользователем Dark Wizard, 5 дек 2018.

  1. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    174
    Симпатии:
    77
    Подскажите функцию calc() для расчёта количества/суммы пожалуйста.

    Код:
    <form>
    <input type="hidden" name="price[1]" value="10"><input type="number" class="zinput" name="item[1]" value="0" onchange="calc();"><br>
    <input type="hidden" name="price[2]" value="15"><input type="number" class="zinput" name="item[2]" value="0" onchange="calc();"><br>
    ...
    <input type="hidden" name="price[n]" value="5"><input type="number" class="zinput" name="item[n]" value="0" onchange="calc();"><br>
    </form>
    
    <div id="sum">Кол-во: 0<br>Сумма: 0</div>
    
    Можно на jquery, но лучше без. Чтобы перебирало все элементы и сохраняло из заполненных 2 переменных - общие цену и количество.

    Просто для суммы у меня работает такая функция:

    Код:
    function calc(){
          var total = 0;
          $('input.zinput').each(function(i,elem) {
            var val = parseFloat($(this).val());
            if(isNaN(val)) val = 0;
            total = total + val;
          });
          $('#sum').html(total);
    }
    
    но как её переделать ещё и на учёт количества не соображу...
     
  2. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    174
    Симпатии:
    77
  3. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    500
    Симпатии:
    349
    HTML:
    
      document.addEventListener('DOMContentLoaded', ()=>{
        var q = document.querySelectorAll('.zinput');
        function sum(){
          var quantity = 0, total = 0;
          q.forEach(($this)=>{
           quantity += ~~$this.previousSibling.value;
            total += ~~$this.value;
          });
          document.getElementById('sum').innerHTML = quantity + ' | ' + total;
        }
        q.forEach((v,i) =>{
         q[i].addEventListener('input', ()=>{
           sum();
         });
        });
      });
     
    metal-stroi-komplekt и BaNru нравится это.