Значение текста остается неизменным после изменения значения

Question

У меня есть четыре текстовых поля, в которые пользователь вводит значения. Для двух верхних полей ввода он вычисляет добавление обоих полей вместе. Идея состоит в том, чтобы получить процентное значение каждого из этих полей. Поэтому, когда есть значение, мы делим на общее число, а затем несколько на 100, чтобы получить процентное значение для каждого текстового поля.

Все это работает отлично!

Однако, если пользователь вручную входит и добавляет процент дня, он должен автоматически рассчитать ночной процент (или наоборот), просто получив значение и вычитая на 100.

Каждый раз, когда я меняю значение, оно возвращается к старой версии.

var day_value, night_value, day_percentage, night_percentage; 
 

 
$('#day_kwh').on('input', function() { 
 
    day_value = this.value; 
 
}); 
 

 
$('#night_kwh').on('input', function() { 
 
    night_value = this.value; 
 
}); 
 

 
$('.storage').on('change', function() { 
 
    //console.log(day_value + night_value); 
 
    if (typeof day_value != 'undefined' && typeof night_value != 'undefined') { 
 
    total = parseInt(day_value) + parseInt(night_value); 
 
    console.log('total value: ' + total); 
 
    day_value = (day_value/total) * 100; 
 
    console.log('day value: ' + day_value); 
 
    night_value = (day_value/total) * 100; 
 
    console.log('night value: ' + night_value); 
 

 
    $('#day_percent').val(day_value); 
 
    $('#night_percent').val(night_value); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="storage"> 
 
    Day kWH: 
 
    <input type="text" name="day_kwh" id="day_kwh"> 
 
    <br>Night kWH: 
 
    <input type="text" name="night_kwh" id="night_kwh"> 
 
    <br>Day %: 
 
    <input type="text" name="day_percent" id="day_percent"> 
 
    <br>Night %: 
 
    <input type="text" name="night_percent" id="night_percent"> 
 
    <br> 
 

 
    <input type="submit" value="Submit"> 
 
</div>

Answer 1

Вам нужно добавить дополнительный код, чтобы проверить, если элемент управления, который изменил это day_percent

$('.storage').on('change', function(e) { 
//console.log(day_value + night_value); 
    if(e.target && $(e.target).attr('id') == 'day_percent'){ 
    /* Write the logic for your calculation you want */ 
    } 
    else 
    if (typeof day_value != 'undefined' && typeof night_value != 'undefined') { 
    total = parseInt(day_value) + parseInt(night_value); 
    console.log('total value: ' + total); 
    day_percentage = (day_value/total) * 100; 
    console.log('day value: ' + day_value); 
    night_percentage = (night_value/total) * 100; 
    console.log('night value: ' + night_value); 

    $('#day_percent').val(day_percentage); 
    $('#night_percent').val(night_percentage); 

    } 
});