Calculation not working on keypress event on input field using jQuery and bootstrap-CodePudding

I have a simple converter that is working perfectly when I select the currency i.e on the click event of currency button. However when I want this function or calculation to also work when a user enters a value in the input field or increases or decreases the value but the function is not triggering on any of above event.

$('.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 > = <span id="currentprice" >50</span>CHF</p>
<div >
  <p  style="margin-bottom:5px;">Converter</p>
  <form  action=" " method="post">
    <div >
      <input id="totalCoinValue" type="number" value="0"  aria-label="Text input with dropdown button" required>
      <button id="currencybtn"  type="button" data-bs-toggle="dropdown" aria-expanded="false"> </button>
      <ul >
        <li><span >USD</span></li>
        <li><span >JPY</span></li>
        <li><span >GBP</span></li>
      </ul>
    </div>
  </form>
  <p  style=" "><span id="totalTokenResult">=0.0000 CHF</span> </p>
</div>

CodePudding user response：

I have updated the script a little bit. Now it is working when a user enters a value in the input field or increases or decreases the value.

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 > = <span id="currentprice" >50</span>CHF</p>
  <div >
    <p  style="margin-bottom:5px;">Converter</p>
    <form  action=" " method="post">
      <div >

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

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

        <ul >
          <li><span >USD</span></li>
          <li><span >JPY</span></li>
          <li><span >GBP</span></li>
        </ul>
      </div>
    </form>
    <p  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>