2015-12-22 20 views
2

我有四個文本字段,其中用戶插入值。對於前兩個輸入字段,它執行將兩個字段添加在一起的計算。這個想法是獲得每個領域的百分比值。所以一旦有一個值,我們除以總數,然後乘以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>

+1

我想你忘記改變一些變量,HTTPS的:// jsfiddle.net/1n4c6ja6/似乎工作。我錯過了什麼嗎? –

+0

@AndrewBrooke它看起來像。 'day_value'和'night_value'在兩個不同的地方設置,這意味着兩件不同的事情。 – A1rPun

+0

1.您正在調用一個通用函數來更新百分比。所以當你改變百分比字段時,相同的函數會運行。 2.繼續使用day_value和night_value字段來計算您應該使用day_percent和night_percent變量的百分比。這本身並不能解決你的問題,但這是一個好的開始。讓我們知道如果你需要更多的幫助,我們可以爲你審查和修改jsfiddle。 – Will

回答

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); 

    } 
}); 
相關問題