Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

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
<!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>

Open in new window


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));
    });
});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of APD Toronto

ASKER

Thanks Again!