為什么在選擇了貨幣對之后，匯率總是在下面的代碼中顯示N/A，如何最好地修復它？
當選擇一對貨幣時，我希望匯率值顯示計算值。
我該怎么做才能正確顯示價格？
有什么庫我可以用來做更好的轉換嗎？
{% extends "app/base.html" %}
{% block content %}
<head>
<title>Cross-Border Payment App</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
form {
width: 80%;
padding: 20px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333333;
cursor: pointer; /* Add cursor style to indicate it's clickable */
}
h1:hover {
text-decoration: underline; /* Add underline effect on hover */
}
label {
font-weight: bold;
}
input[type="text"],
select {
width: 100%;
padding: 10px;
border: 3px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
input[type="submit"] {
width: 100%;
padding: 10px 20px;
background-color: #4CAF50;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.exchange-rate {
font-size: 14px;
font-style: italic;
color: #999999;
margin-top: 5px;
}
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
email {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
.bank-options {
border: 1px solid #ccc;
border-radius: 4px;
max-height: 100px;
overflow-y: auto;
padding: 5px;
}
.bank-option {
cursor: pointer;
padding: 5px;
}
.bank-option:hover {
background-color: #f2f2f2;
}
.bank-option.disabled {
color: #999999;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>Glocal Payments</h1>
<form method="post" action="{% url 'glocal' %}" onsubmit="return validatePaymentAmount()">
{% csrf_token %}
<div class="form-field">
<label for="sender_name">Sender's Name:</label>
<input type="text" name="sender_name" id="sender_name">
</div>
<div class="form-field">
<label for="sender_account_number">Sender's Account Number:</label>
<input type="text" name="sender_account_number" id="sender_account_number">
</div>
<div class="form-field">
<label for="sender_country">Sender's Country:</label>
<select name="sender_country" id="sender_country">
<option value="">Select Country</option>
<option value="USA">USA</option>
<option value="Nigeria">Nigeria</option>
</select>
</div>
<div class="form-field">
<label for="sender_bank">Sender's Bank:</label>
<input type="text" name="sender_bank" id="sender_bank">
</div>
<div class="form-field">
<label for="recipient_name">Recipient's Name:</label>
<input type="text" name="recipient_name" id="recipient_name">
</div>
<div class="form-field">
<label for="recipient_account_number">Recipient's Account Number:</label>
<input type="text" name="recipient_account_number" id="recipient_account_number">
</div>
<div class="form-field">
<label for="recipient_country">Recipient's Country:</label>
<select name="recipient_country" id="recipient_country">
<option value="">Select Country</option>
<option value="USA">USA</option>
<option value="Nigeria">Nigeria</option>
</select>
</div>
<div class="form-field">
<label for="recipient_bank">Recipient's Bank:</label>
<input type="text" name="recipient_bank" id="recipient_bank">
</div>
<div class="form-field">
<label for="sender_currency">Sender's Currency:</label>
<select name="sender_currency" id="sender_currency" onchange="calculateExchangeRate()">
<option value="">Select Currency</option>
<option value="USD-NGN">NGN</option>
<option value="NGN-USD">USD</option>
<!-- Add other sender currencies here -->
</select>
</div>
<div class="form-field">
<label for="recipient_currency">Recipient's Currency:</label>
<select name="recipient_currency" id="recipient_currency" onchange="calculateExchangeRate()">
<option value="">Select Currency</option>
<option value="NGN-USD">USD</option>
<option value="USD-NGN">NGN</option>
<!-- Add other recipient currencies here -->
</select>
</div>
<div class="form-field">
<label for="amount">Amount:</label>
<input type="text" name="amount" id="amount">
</div>
<div class="form-field">
<label for="exchange_rate">Exchange Rate:</label>
<span id="exchange_rate" class="exchange-rate"></span>
</div>
<div class="form-field">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</div>
<div class="form-field">
<label for="narration">Narration/Purpose:</label>
<input type="text" name="narration" id="narration">
</div>
<div class="form-field">
<input type="submit" value="Make Payment">
</div>
</form>
{% block scripts %}
<script>
function calculateExchangeRate() {
var senderCurrency = document.getElementById("sender_currency").value;
var recipientCurrency = document.getElementById("recipient_currency").value;
// Define the exchange rates
var exchangeRates = {
"USD-NGN": 770.00, // Exchange rate from USD to NGN
"NGN-USD": 1 / 770.00, // Exchange rate from NGN to USD
// Add other currency pairs and their respective exchange rates here
};
var currencyPair = senderCurrency + "-" + recipientCurrency;
var exchangeRate = exchangeRates[currencyPair];
// Display the exchange rate or "N/A"
var exchangeRateField = document.getElementById("exchange_rate");
if (exchangeRateField) {
if (exchangeRate !== undefined) {
exchangeRateField.textContent = "Exchange Rate: " + exchangeRate.toFixed(4);
} else {
exchangeRateField.textContent = "N/A";
}
}
}
// Call the calculateExchangeRate function initially and on currency selection change
document.getElementById("sender_currency").addEventListener("change", calculateExchangeRate);
document.getElementById("recipient_currency").addEventListener("change", calculateExchangeRate);
calculateExchangeRate(); // Call it initially to display the exchange rate for the selected currency pair
</script>
{% endblock %}
</body>
{% endblock %}# # #正如James在他的評論中提到的，您的貨幣選擇器中的選項有NGN-美元或美元-NGN的值，所以實際上您只需要一個選擇。
您可能還希望將輸入值字符串強制轉換為一個數字(以減少任何錯誤)，盡管在這種情況下，這并不是絕對必要的。
在這個簡化的例子中，我將select & quot轉換& quot。
// Cache the relevant elements
const conversionEl = document.querySelector('#conversion');
const amountEl = document.querySelector('#amount');
const rateEl = document.querySelector('#exchange_rate');
// Add listeners to the elements
conversionEl.addEventListener('change', calculateExchangeRate);
amountEl.addEventListener('input', calculateExchangeRate);
// Set up the exchange rates
const exchangeRates = {
'NGN-USD': 1 / 770.00,
'USD-NGN': 770.00
};
function calculateExchangeRate() {
// Get the values from the elements
const conversion = conversionEl.value;
const amount = Number(amountEl.value);
// Set the text content of the rate span to be the
// amount multiplied by the conversion value (defined in
// the exchangeRates object)
rateEl.textContent = amount * exchangeRates[conversion];
}body,form{padding:20px}email,input[type=text],select{width:100%;padding:10px;margin-bottom:10px}.bank-option:hover,body{background-color:#f2f2f2}body{font-family:Arial,sans-serif}form{width:80%;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.1)}h1{text-align:center;color:#333;cursor:pointer}h1:hover{text-decoration:underline}label{font-weight:700}input[type=text],select{border:3px solid #ccc;border-radius:4px}input[type=submit]{width:100%;padding:10px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer}input[type=submit]:hover{background-color:#45a049}.exchange-rate{font-size:14px;font-style:italic;color:#999;margin-top:5px}email,select{border:1px solid #ccc;border-radius:4px}.bank-options{border:1px solid #ccc;border-radius:4px;max-height:100px;overflow-y:auto;padding:5px}.bank-option{cursor:pointer;padding:5px}.bank-option.disabled{color:#999;cursor:not-allowed}<div class="form-field">
<label for="conversion">Conversion</label>
<select name="conversion" id="conversion">
<option value="">Select Currency</option>
<option value="USD-NGN">USD-NGN</option>
<option value="NGN-USD">NGN-USD</option>
</select>
</div>
<div class="form-field">
<label for="amount">Amount:</label>
<input type="text" name="amount" id="amount">
</div>
<div class="form-field">
<label for="exchange_rate">Exchange Rate:</label>
<span id="exchange_rate" class="exchange-rate"></span>
</div>