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>