Как получить последнее значение заряда формы в jQuery

Question

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

Визуальный взгляд:

Всегда хочу показать последний / обновленный

Ударь мой код:

var adultsSingleChage = 200;
var childrenSingleCharge = 100;
var infantsSingleCharge = 50;


$('#absbt_form input').change(function(){
    var adults = $("#absbt_adults").val();
    var adultsCharge = adults * adultsSingleChage;

    var children = $("#absbt_children").val();
    var childrenCharge = children * childrenSingleCharge;

    var infants = $("#absbt_infants").val();
    var infantsCharge = infants * infantsSingleCharge;

    var totalCharge = adultsCharge + childrenCharge + infantsCharge;

    console.log(totalCharge);


    $('.total_cost').append(totalCharge);

});

Я знаю, что сделал максимум логики, но для последней логики я запутался.

Как я могу просто показать последний?

Answer 1

append добавляет новый контент к существующему - это причина наличия предыдущих значений.

Вместо того, чтобы использовать append использование text:

$('.total_cost').text(totalCharge);

Answer 2

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

1. текст (): $('.total_cost').text("iota")
2. html (): $('.total_cost').html("iota")

Примечание: используйте идентификатор селектора или с использованием класса $($('.total_cost')[0])

Answer 3

Используйте html(totalCharge) вместо append(totalCharge)