0
私は通貨交換アプリケーションを構築していますが、基本的な機能は完了しましたが、基本通貨の入力値を変更せずに目標通貨を変更すると、目標通貨は更新されません。 2番目の要素の値を変更すると、すでにベース入力にあるものに基づいてレートが自動的に再計算されるようにしたいと思います。ドロップダウンメニューの選択時に入力フィールドを更新するのに手助けが必要
これは私の最初の質問ですので、やさしくなることです。
ありがとうございます。
あなたがここにプロジェクトを見つけることができます：https://codepen.io/azdravkovski/pen/BddLeQ?editors=0010
$(document).ready(function() {
//First AJAX call populates dropdown
$.ajax({
url: 'https://api.fixer.io/latest?',
success: function(data) {
var currencyNoBase = Object.keys(data.rates);
var currencyWithBase = currencyNoBase.concat(data.base).sort();
//Populate dropdown lists with currency names
$.each(currencyWithBase, function (val, text) {
$('.currencies').append($('<option />').val(val).html(text));
});
//Set default currencies in base and target
$('#base').val('8');
$('#target').val('30');
},
dataType: 'json'
});
//return selected base currency
$('#curr1').on('input', function() {
var base = $('#base option:selected').text();
var url = 'https://api.fixer.io/latest?base=' + base;
// Second AJAX call sets base currency
$.ajax({
url: url,
success: function(data2) {
var target = $('#target option:selected').text();
var curr1 = $('#curr1').val();
var curr2 = $('#curr2').val();
var converted = curr1 * data2.rates[target];
$('#curr2').val(converted.toFixed(2));
console.log(converted);
//Clear input fields when changing currency
$('#base').on('change', function() {
$('#curr1').val('');
$('#curr2').val('');
})
},
dataType: 'json'
});
});
をし、HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Currency Exchange Rate App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.6.1/rickshaw.min.css">
</head>
<body>
<!--INTERFACE-->
<select name="base" class="currencies" id="base"></select>
<input type="number" name="curr1" min="0" id="curr1" placeholder='0' step='.1'>
<br>
<br>
<select name="target" class="currencies" id="target"></select>
<input type="number" name="curr2" min="0" id="curr2" placeholder='0' disabled>
<!-- <button id="convert">Convert</button>-->
<div id="test"></div>
<br>
<br>
<!--CHART-->
<div id="chart"></div>
<!--SCRIPTS-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.6.1/rickshaw.js"></script>
<script type="text/javascript" src="vendor/jquery-3.2.1.js"></script>
<script type="text/javascript" src="src/app.js"></script>
</body>
</html>