使用jQuery和引導程式計算輸入欄位上的按鍵事件不起作用

我有一個簡單的轉換器，當我選擇貨幣時，即在貨幣按鈕的點擊事件上，它作業得很好。但是，當我希望此函式或計算在用戶在輸入欄位中輸入一個值或增加或減少該值但該函式未觸發上述任何事件時也可以作業。

$('.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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

我已經稍微更新了腳本。現在，當用戶在輸入欄位中輸入一個值或增加或減少該值時，它就可以作業了。

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

 </body>

</html> 

標籤：javascript jQuery css 推特引导

上一篇：引導位置按鈕右

下一篇：簡潔地將一個串列包裝在一個可呼叫物件中，該可呼叫物件按順序為每個連續呼叫回傳每個串列元素