使用jQuery和引导不处理输入字段上的键压事件的计算

Question

我有一个简单的转换器，当我选择货币，即点击事件的货币按钮是完美的工作。但是，当用户在输入字段中输入值或增加或减少值时，我希望此函数或计算也能工作，但该函数不会在上述任何事件上触发。

​

$('.dropdown-menu span').click(function exchanger() {

  $('#currencybtn').text($(this).text());

  var SelectedCurrency = $("#currencybtn").text();
  var currentTokenPrice = $("#currentprice").text();
  var toBeConvertedValue = $("#totalCoinValue").val();

  if (SelectedCurrency == "USD") {
    var bnbValue = currentTokenPrice * (80 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)

    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");


  } else if (SelectedCurrency == "JPY") {
    var bnbValue = currentTokenPrice * (70 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)
    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");

  } else if (SelectedCurrency == "GBP") {
    var bnbValue = currentTokenPrice * (100 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)
    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");

  } else {
    var bnbValue = 0;

  }
});

$('#totalCoinValue input').on('keypress', function exchanger() {

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Google fonts CSS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<p class="text-uppercase m-0     BelowTextNumber fs-2 fw-bold "> = <span id="currentprice" class="fs-2">50</span>CHF</p>
<div class="col-12 ms-1">
  <p class="text-uppercase mt-2  dbHeading" style="margin-bottom:5px;">Converter</p>
  <form class="" action=" " method="post">
    <div class="input-group mb-3">
      <input id="totalCoinValue" type="number" value="0" class="form-control" aria-label="Text input with dropdown button" required>
      <button id="currencybtn" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><span class="dropdown-item">USD</span></li>
        <li><span class="dropdown-item">JPY</span></li>
        <li><span class="dropdown-item">GBP</span></li>
      </ul>
    </div>
  </form>
  <p class="text-uppercase mt-2   resultext fs-5" style=" "><span id="totalTokenResult">=0.0000 CHF</span> </p>
</div>

​

Answer 1

我已经更新了一些脚本。现在，当用户在输入字段中输入值或增加或减少值时，它就开始工作了。

​

function exchanger() {
  var SelectedCurrency = $("#currencybtn").text();
  var currentTokenPrice = $("#currentprice").text();
  var toBeConvertedValue = $("#totalCoinValue").val();
  

  if (SelectedCurrency == "USD") {
    var bnbValue = currentTokenPrice * (80 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)

    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");


  } else if (SelectedCurrency == "JPY") {
    var bnbValue = currentTokenPrice * (70 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)
    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");

  } else if (SelectedCurrency == "GBP") {
    var bnbValue = currentTokenPrice * (100 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)
    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");

  } else {
    var bnbValue = 0;

  }
}
$('.dropdown-menu span').click(function() {
$('#currencybtn').text($(this).text());
 exchanger();
  
});

$('input#totalCoinValue').on('input', function() {
exchanger();
});
$('#currencybtn').text("USD");

<!DOCTYPE html>


<html lang="en">

<head>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <!-- Google fonts CSS -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>

<body>

  <p class="text-uppercase m-0     BelowTextNumber fs-2 fw-bold "> = <span id="currentprice" class="fs-2">50</span>CHF</p>
  <div class="col-12 ms-1">
    <p class="text-uppercase mt-2  dbHeading" style="margin-bottom:5px;">Converter</p>
    <form class="" action=" " method="post">
      <div class="input-group mb-3">

        <input id="totalCoinValue" type="number" value="0" class="form-control" aria-label="Text input with dropdown button" required>

        <button id="currencybtn" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> </button>

        <ul class="dropdown-menu dropdown-menu-end">
          <li><span class="dropdown-item">USD</span></li>
          <li><span class="dropdown-item">JPY</span></li>
          <li><span class="dropdown-item">GBP</span></li>
        </ul>
      </div>
    </form>
    <p class="text-uppercase mt-2   resultext fs-5" style=" "><span id="totalTokenResult">=0.0000 CHF</span> </p>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

 </body>

</html> 

​