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

Question

我正在研究用值更新 2 个文本框的 slider ， slider 处于有限范围内，因此它不会给出低于/高于最小值/最大值的值。

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

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

我知道这很令人困惑，但例如在 CAD 框中输入 50，它会将 BTC 更新为 0.04113，但如果您在 CAD 框中输入 200，它会将其更改为允许的最大值，即 99.99，但 BTC 框保持在0.16453，是允许的 0.08 BTC 的两倍，并且不会更新为 99.99 等值。

关于如何解决这个问题有什么想法/指示吗？ https://jsfiddle.net/4o6ashpn/

(jsfiddle中的js和css仅用于 slider )

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>