我如何乘以只读输入字段的值并将结果显示在另一个字段中

Question

我有三个输入字段，当您在第一个字段中输入 BTC 金额时，它会为您提供 BTC 等值的美元。 然后我添加了一个包含特定值的隐藏输入字段，比如说“460”，现在我希望以美元为单位的 BTC 乘以“460”并在只读输入字段中给出结果。 下面的代码展示了我的解释。

 $(".form-control").keyup(function() { //input[name='calc'] let convFrom; if ($(this).prop("name") == "btc") { convFrom = "btc"; convTo = "usd"; } else { convFrom = "usd"; convTo = "btc"; } $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json", function(data) { var origAmount = parseFloat($("input[name='" + convFrom + "']").val()); var exchangeRate = parseInt(data.bpi.USD.rate_float); let amount; if (convFrom == "btc") amount = parseFloat(origAmount * exchangeRate); else amount = parseFloat(origAmount / exchangeRate); $("input[name='" + convTo + "']").val(amount.toFixed(2)); }); });

 <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <form> <input type="number" name="btc" class="form-control" id="validationTooltip02" placeholder="BTC"> <input type="number" name="usd" class="form-control" id="a" onkeyup="add()" placeholder="USD" readonly>

对于乘法，我在 USD 字段中添加了 onkeyup 函数，

<script type="text/javascript">
        function add() {
  var x = parseInt(document.getElementById("a").value);
  var y = parseInt(document.getElementById("b").value)
  document.getElementById("c").value = x * y;
}
    </script>

然后尝试使用<input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly>通过 ID 将结果收集到一个字段中

如果我在 USD 字段中删除 readonly 并直接键入，但是当它是 readonly 时，它不适用于该字段中的 BTC 到 USD 总和的结果。 我希望我能够解释这一点。 请帮助，因为我不是专家。

Answer 1

您将jQuery和JS混合在一起，最好坚持使用一个以避免混淆。 您不需要单独的函数添加第三个输入值乘以second值。

您可以在API调用函数中完成所有这些操作。 除了获得decimals之外，您还需要在final第三个输入amount上使用toFixed() 。

此外，为了更好的用户体验，我建议使用.on input功能，这比key-up更好key-up因为您有input类型编号。 您可以通过单击输入中的增加来使用increment您的数字，新值和总数将立即反映，而不是再次单击或输入。

现场工作演示：

 $("#validationTooltip02").on('input', function() { //input[name='calc'] let convFrom; if ($(this).prop("name") == "btc") { convFrom = "btc"; convTo = "usd"; } else { convFrom = "usd"; convTo = "btc"; } $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json", function(data) { var origAmount = parseFloat($("input[name='" + convFrom + "']").val()); var exchangeRate = parseInt(data.bpi.USD.rate_float); let amount; if (convFrom == "btc") amount = parseFloat(origAmount * exchangeRate); else amount = parseFloat(origAmount / exchangeRate); $("input[name='" + convTo + "']").val(amount.toFixed(2)); //Add here var a = parseFloat($('#a').val()) var b = parseFloat($('#b').val()) var final = a * b//final amount multiplied by 465 $('#c').val(final.toFixed(2)) }); });

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <form> <input type="number" name="btc" class="form-control" id="validationTooltip02" placeholder="BTC"> <input type="number" name="usd" class="form-control" id="a" placeholder="USD" readonly> <input type="hidden" id="b" value="465"> <input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly> </form>

Answer 2

所以，我认为你应该在你已经在.form-control keyup 上调用的函数中使用你的 add 函数，就像这样：

$(".form-control").keyup(function() { //input[name='calc']
  let convFrom;
  if ($(this).prop("name") == "btc") {
    convFrom = "btc";
    convTo = "usd";
  } else {
    convFrom = "usd";
    convTo = "btc";
  }
  $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json",
    function(data) {
      var origAmount = parseFloat($("input[name='" + convFrom + "']").val());
      var exchangeRate = parseInt(data.bpi.USD.rate_float);      
      let amount;
      if (convFrom == "btc")
        amount = parseFloat(origAmount * exchangeRate);
      else
        amount = parseFloat(origAmount / exchangeRate);
      $("input[name='" + convTo + "']").val(amount.toFixed(2));
      
      // Here goes the content of the add function
      var x = parseInt(document.getElementById("a").value);
      var y = parseInt(document.getElementById("b").value)
      document.getElementById("c").value = x * y;
    });
});