APD Toronto
asked on
Need to click button twice to get results
Hello Experts,
I am trying to use the fixer.io API, but I need to click my button twice in order to get the correct results. Even when you click it the first time you load the page you get "Undefined".
Any help will be appreciated.
My HTML
exchange.js
I am trying to use the fixer.io API, but I need to click my button twice in order to get the correct results. Even when you click it the first time you load the page you get "Undefined".
Any help will be appreciated.
My HTML
<!DOCTYPE html>
<!--
COMP 9633 JavaScript Programming
Assignment #2: Foreign Exchange API
Aleksandar Poposki, Student #100463295
-->
<html>
<head>
<title>Foreign Exchange API</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Foreign Exchange API</h1>
<em>Please specify the necessary information <b> All Fields Mandatory</b>:</em>
<form>
<br/><br/>
From:
<select id="selFrom">
<option value='AUD'>AUD</option>
<option value='BGN'>BGN</option>
<option value='BRL'>BRL</option>
<option value='CAD'>CAD</option>
<option value='CHF'>CHF</option>
<option value='CNY'>CNY</option>
<option value='CZK'>CZK</option>
<option value='DKK'>DKK</option>
<option value='EUR'>EUR</option>
<option value='GBP'>GBP</option>
<option value='HKD'>HKD</option>
<option value='HRK'>HRK</option>
<option value='HUF'>HUF</option>
<option value='IDR'>IDR</option>
<option value='ILS'>ILS</option>
<option value='INR'>INR</option>
<option value='JPY'>JPY</option>
<option value='KRW'>KRW</option>
<option value='MXN'>MXN</option>
<option value='MYR'>MYR</option>
<option value='NOK'>NOK</option>
<option value='NZD'>NZD</option>
<option value='PHP'>PHP</option>
<option value='PLN'>PLN</option>
<option value='RON'>RON</option>
<option value='RUB'>RUB</option>
<option value='SEK'>SEK</option>
<option value='SGD'>SGD</option>
<option value='THB'>THB</option>
<option value='TRY'>TRY</option>
<option value='ZAR'>ZAR</option>
</select>
<br/><br/>
Amount: <input type="text" value="0.00" id="txtAmount" />
<br/><br/>
Date: <input type="text" value="2016-12-22" id="txtDate" /> use YYYY-MM-DD format
<br/><br/>
To:
<select id="selTo">
<option value='AUD'>AUD</option>
<option value='BGN'>BGN</option>
<option value='BRL'>BRL</option>
<option value='CAD'>CAD</option>
<option value='CHF'>CHF</option>
<option value='CNY'>CNY</option>
<option value='CZK'>CZK</option>
<option value='DKK'>DKK</option>
<option value='EUR'>EUR</option>
<option value='GBP'>GBP</option>
<option value='HKD'>HKD</option>
<option value='HRK'>HRK</option>
<option value='HUF'>HUF</option>
<option value='IDR'>IDR</option>
<option value='ILS'>ILS</option>
<option value='INR'>INR</option>
<option value='JPY'>JPY</option>
<option value='KRW'>KRW</option>
<option value='MXN'>MXN</option>
<option value='MYR'>MYR</option>
<option value='NOK'>NOK</option>
<option value='NZD'>NZD</option>
<option value='PHP'>PHP</option>
<option value='PLN'>PLN</option>
<option value='RON'>RON</option>
<option value='RUB'>RUB</option>
<option value='SEK'>SEK</option>
<option value='SGD'>SGD</option>
<option value='THB'>THB</option>
<option value='TRY'>TRY</option>
<option value='ZAR'>ZAR</option>
</select>
<br/><br/>
<button id="btnConvert">Get Conversion</button>
<div id="divResults"></div>
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/number_format.js"></script> <!--Script For Formatting Numbers-->
<script src="js/exchange.js"></script>
</body>
</html>
exchange.js
//app object
var exchange = {};
//Rates variable
exchange.rates;
//Get Rates Method
exchange.getRates = function(date, baseCurr){
$.ajax({
url: 'https://api.fixer.io/' + date,
type: 'GET',
data: {
base: baseCurr
},
success: function(result){
exchange.rates = result; //.rates;
},
error: function(error){
console.log('Something went wrong.');
console.error(error);
}
});
}
//Calculate method
exchange.doCalculation = function(toCurr, amount){
return exchange.rates;
}
$(function() { //Document Ready
//Event Listener
$('#btnConvert').on('click', function(e){
//Prevent Default action of reloading page
e.preventDefault();
//Get User Input
var validated = true;
var fromCurr = $('#selFrom').val();
var fromAmt = $('#txtAmount').val();
var date = $('#txtDate').val();
var toCurr = $('#selTo').val();
//Get Rates on the base (from) currency
exchange.getRates(date, fromCurr);
//Calculate the to currency
var result = exchange.doCalculation(toCurr, fromAmt);
//output result
$('div').append('<pre> res = ' + JSON.stringify(result));
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER