Подсчет данных при изменении

216

30 марта 2018, 11:47

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

var sum=0;
$('#cpu').change(function(event) {
        var val=parseInt($(this).val());
    var itog=val*2;
    sum+=itog;
    $("#itog").text(sum);
});
$("#txt").keyup(function (e) {
        var val=parseInt($(this).val());    
        sum+=val;
        $("#itog").text(sum);
    })

В таком виде от все плюсует. А мне нужно чтобы только последние значения

Например: вводим 5 в поле и выбираем 1000 в выпадающем списке

он должен в списке умножить значение на 2
прибавить значение текстового поля

Сейчас значение плюсуются и плюсуются, проблема в том,как сделать так, что бы они перезаписывались, а не добавлялись https://jsfiddle.net/ex7aze3z/12/

Answer 1

Думаю, лучше сделать так jsfiddle.

function calculateSum(cpuVal, txtVal) { 
  var sum = (parseFloat(cpuVal) || 0) * 2 + (parseFloat(txtVal) || 0); // проверка на NaN 
  $("#itog").text(sum); 
} 
 
$('#cpu').change(function() { 
  calculateSum($("#cpu").val(), $("#txt").val()); 
}); 
 
$("#txt").on("input", function() { 
  calculateSum($("#cpu").val(), $("#txt").val()); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input placeholder="число" id="txt" value="1" type="text" class="number-txtbox validate"> 
 
<!-------------------------> 
 
<select id="cpu" class="selection icons"> 
										  <option value="0" disabled selected>Выберите </option> 
										  <option value="260" >260 Р</option> 
										  <option value="450"> 450 Р</option> 
										  <option value="850">850 Р</option> 
										  <option value="1000"> 1000 Р</option>	 
									</select> 
 
<p id="itog"></p>

Только учтите, что вместо события keyup лучше использовать событие input.

Answer 2

Вам нужно просто добавить обнуление переменной sumпри смене значения в select

var sum=0;
$('#cpu').change(function(event) {
    sum = 0; //обнуление переменной при смене значения
    var val=parseInt($(this).val());
    var itog=val*2;
    sum+=itog;
    $("#itog").text(sum);
});
$("#txt").keyup(function (e) {
    var val=parseInt($(this).val());    
    sum+=val;
    $("#itog").text(sum);
})