Расчеты и запуск обмена с записью результата в html

Question

Мне нужно, чтобы #totalcost всегда был заполнен. Есть некоторые вычисления javascript, и результат записывается в общую стоимость #. Я пытался разместить его на JSFiddle, но у меня не было успеха при запуске функции загрузки. для каждого изменения поля ввода.number.localTotal устанавливается как localTotal * числовое значение. В двух словах мне нужно всегда заполнять.localTotal и #totalcost

.localTotal с.price*.quantity и #totalcost с суммой всех.localTotals

вот HTML

<div class="row"> <div class="col-xs-5">
<span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div>
<div class="col-xs-3 price">2020.20</div>
<div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div>
<div class="localTotal"></div></div>

<div class="row"> 
<div class="col-xs-5"><span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div>
<div class="col-xs-3 price">30300.20</div><div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div>
<div class="localTotal"></div></div>

<div class="col-xs-4 head " id="totalcost"></div>

И JavaScript

 function changeQuantity(){
        $(".quantity").trigger("change");
        console.log("done")

        $('.quantity').change(calculateTotal);
        function calculateTotal(){
            $quantity=$(this);

            $price=$quantity.closest('.row').find('.price').text();
            $quantityValue=$quantity.val();
            $localTotal=$quantity.closest('.row').find('.localTotal');
            $localTotalValue=$quantityValue*$price;
            $quantity.closest('.row').find('.localTotal').text($localTotalValue);
            console.log($localTotalValue);
            var sumToTotal = 0;
            var totalSum=document.getElementById('totalcost');
            $('.localTotal').each(function(){
                sumToTotal += parseFloat($(this).text());
            });
            totalSum.innerHTML=sumToTotal+' грн';
        }

    }

changeQuantity () запускается при загрузке, но, несмотря на $(". количество").trigger("change"); #totalcost и.localTotal не заполнены:c

Answer 1

Я думаю, вы немного запутались. Вы связываете событие изменения на .quantity пока вы запускаете событие изменения на .number, Также я не знаю почему, но почему вы смешиваете селекторы jQuery и "нормальные" селекторы?

Я не уверен, что именно вы пытаетесь сделать, но вот как это работает:

$(".quantity").on('change', function() {
    /* 
     * Your code
     * replace your 'getElementById('total cost') => $("#totalcost")
     * replace your 'totalSum.innerHTML' => totalSum.text(sumToTotal + ' грн');
     */
});

Теперь когда .quantity изменения вашего обратного вызова увольняют. Это можно сделать, вызвав событие изменения вручную: $('.quantity').trigger('change');

Также я не уверен, что вы подразумеваете под "всегда заполнен". Я думаю, что нам не хватает контекста:)

РЕДАКТИРОВАТЬ

Надеюсь, вы не возражаете, но я немного переработал ваш код

$(".quantity").on('change', function() {
  var context = $(this).closest('.row');
  // Calculate amount
  var amount = parseFloat(context.find(".price").text()) * parseFloat($(this).text());

  // Set the amount
  context.find('.localTotal').text(amount);

  var total = 0;
  $('.localTotal').each(function(el) {
    total += parseFloat($(this).text());
  });
  $("#totalcost").text(total);
});