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

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>

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

如果我在 USD 字段中删除只读并直接键入，则此方法有效，但在只读时不适用于该字段中 BTC 到 USD 总和的结果。我希望我能够解释这一点。请帮忙，因为我不是专家。

Answer 1

你正在混合jQuery在一起，JS理想情况下坚持使用一个以避免混淆。您不需要单独的函数添加第三个输入值乘以的second值。您可以在API调用函数中执行所有这些操作。除了获得你还需要在第三个输入上decimals使用。toFixed()finalamount此外，为了获得更好的用户体验，我建议使用更好的.on功能，因为你有类型号。您可以通过单击增加输入来使用您的数字，新值和总数将立即反映出来，而不是再次单击或输入。inputkey-upinputincrement现场工作演示：$("#validationTooltip02").on('input', function() { //input[name='calc']&nbsp; let convFrom;&nbsp; if ($(this).prop("name") == "btc") {&nbsp; &nbsp; convFrom = "btc";&nbsp; &nbsp; convTo = "usd";&nbsp; } else {&nbsp; &nbsp; convFrom = "usd";&nbsp; &nbsp; convTo = "btc";&nbsp; }&nbsp; $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json",&nbsp; &nbsp; function(data) {&nbsp; &nbsp; &nbsp; var origAmount = parseFloat($("input[name='" + convFrom + "']").val());&nbsp; &nbsp; &nbsp; var exchangeRate = parseInt(data.bpi.USD.rate_float);&nbsp; &nbsp; &nbsp; let amount;&nbsp; &nbsp; &nbsp; if (convFrom == "btc")&nbsp; &nbsp; &nbsp; &nbsp; amount = parseFloat(origAmount * exchangeRate);&nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; amount = parseFloat(origAmount / exchangeRate);&nbsp; &nbsp; &nbsp; $("input[name='" + convTo + "']").val(amount.toFixed(2));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; //Add here&nbsp; &nbsp; &nbsp; var a = parseFloat($('#a').val())&nbsp; &nbsp; &nbsp; var b = parseFloat($('#b').val())&nbsp; &nbsp; &nbsp; var final = a * b//final amount multiplied by 465&nbsp; &nbsp; &nbsp; $('#c').val(final.toFixed(2))&nbsp; &nbsp; });});<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>&nbsp; <input type="number" name="btc" class="form-control" id="validationTooltip02" placeholder="BTC">&nbsp; <input type="number" name="usd" class="form-control" id="a" placeholder="USD" readonly>&nbsp; <input type="hidden" id="b" value="465">&nbsp; <input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly></form>

Answer 2

所以，我认为你应该在你已经调用.form-controlkeyup 的函数中使用你的 add 函数，如下所示：$(".form-control").keyup(function() { //input[name='calc']&nbsp; let convFrom;&nbsp; if ($(this).prop("name") == "btc") {&nbsp; &nbsp; convFrom = "btc";&nbsp; &nbsp; convTo = "usd";&nbsp; } else {&nbsp; &nbsp; convFrom = "usd";&nbsp; &nbsp; convTo = "btc";&nbsp; }&nbsp; $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json",&nbsp; &nbsp; function(data) {&nbsp; &nbsp; &nbsp; var origAmount = parseFloat($("input[name='" + convFrom + "']").val());&nbsp; &nbsp; &nbsp; var exchangeRate = parseInt(data.bpi.USD.rate_float);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; let amount;&nbsp; &nbsp; &nbsp; if (convFrom == "btc")&nbsp; &nbsp; &nbsp; &nbsp; amount = parseFloat(origAmount * exchangeRate);&nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; amount = parseFloat(origAmount / exchangeRate);&nbsp; &nbsp; &nbsp; $("input[name='" + convTo + "']").val(amount.toFixed(2));&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // Here goes the content of the add function&nbsp; &nbsp; &nbsp; var x = parseInt(document.getElementById("a").value);&nbsp; &nbsp; &nbsp; var y = parseInt(document.getElementById("b").value)&nbsp; &nbsp; &nbsp; document.getElementById("c").value = x * y;&nbsp; &nbsp; });});