值将不会更新使用if语句，除非编辑/手动提交

Question

我正在工作的滑块，更新2个文本框中的值，滑块是在一个有限的范围内，所以它不会给值低于/高于最小/最大。

当您决定手动更新框中的值时，它也会使用正确的值更新另一个框，但是当您输入的值超出范围时，会将其更新为该框中允许的最大/最小值，但不更新在另一个框中输入相关值，除非您在框中编辑/单击输入。

当您输入一个超出允许范围的值时，我希望它将另一个框更新为最小/最大值。

我知道这是混乱的，但例如把50在CAD中，它更新BTC至0.04113，但如果你把200它，它变成最大的CAD中的允许是99.99，但BTC箱撑在0.16453，这是允许的0.08 BTC的两倍，并没有更新到99.99的等值。

关于如何解决这个问题的任何想法/指针？ https://jsfiddle.net/4o6ashpn/

（js的& CSS中的jsfiddle仅用于滑块）

function bitcoinCheck(input) { 
         if (input.value < 0.002) input.value = 0.002; 
         if (input.value > 0.08) input.value = 0.08; 
        } 
function cadCheck(input) { 
         if (input.value < 2) input.value = 2; 
         if (input.value >= 100) input.value = 99.99; 
        } 

Answer 1

当你调用recalc_cad()或recalc_btc()，只发生在keyup事件，而不是当你你更新其他领域离开现场并发生change事件。您应该在bitcoinCheck()和cadCheck()函数中额外拨打这些函数。

var btcPrice = 1215.60; 
 

 
function cad2btc(amount) { 
 
    amount = parseFloat(amount); 
 
    var btc = amount/btcPrice; 
 
    return btc; 
 
} 
 

 
function btc2cad(amount) { 
 
    amount = parseFloat(amount); 
 
    var cad = amount * btcPrice; 
 
    return cad; 
 
} 
 

 
function recalc_cad(amount) { 
 
    cad = parseFloat(amount.value); 
 
    var btc = cad2btc(cad); 
 

 
    document.getElementById('amount_btc').value = btc.toFixed(5); 
 
} 
 

 
function recalc_btc(amount) { 
 
    var btc = parseFloat(amount.value), 
 
    cad = btc2cad(btc); 
 
    document.getElementById('amount_cad').value = cad.toFixed(2); 
 
} 
 

 
function bitcoinCheck(input) { 
 
    if (input.value < 0.002) input.value = 0.002; 
 
    if (input.value > 0.08) input.value = 0.08; 
 
    recalc_btc(input); 
 
} 
 

 
function cadCheck(input) { 
 
    if (input.value < 2) input.value = 2; 
 
    if (input.value >= 100) input.value = 99.99; 
 
    recalc_cad(input); 
 
}

<input class="input-large" id="amount_btc" name="PAYMENT_AMOUNT_BTC" placeholder="You will receive BTC" pattern="^[0-9.]+$" onkeyup="recalc_btc(this);" onchange="bitcoinCheck(this);" required> 
 

 
<input class="input-large" id="amount_cad" name="PAYMENT_AMOUNT" placeholder="Amount (CAD) - Minimum 1$" pattern="^[0-9.]+$" onkeyup="recalc_cad(this);" onchange="cadCheck(this);" required>