0

私は通貨コンバーターをやっています。ページが読み込まれると、 document.ready 関数を使用して ajax を呼び出して標準通貨を表示します。しかし、そうではありません。

同じことを行うキープレス機能があり、機能します。したがって、問題は、ページのロード時に表示されず、キープレス機能でのみ表示されることです。

誰かが手を差し伸べることができますか？

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="layout.css">
        <script src='jquery.js'></script>
        <title>Calculator Teste</title>
    </head>
    <body>
        <header>
            <div id="logo">Money Converter</div>
        </header>
        <div id="wrapper">
    <div id="from_select">
        <select name="from" id="from">
            <option selected="selected" value="USD">United States Dollars - USD</option>
            <option value="EUR">Euro - EUR</option>
            <option value="GBP">United Kingdom Pounds - GBP</option>
            <option value="CAD">Canada Dollars - CAD</option>
            <option value="AUD">Australia Dollars - AUD</option>
            <option value="JPY">Japan Yen - JPY</option>
            <option value="INR">India Rupees - INR</option>
            <option value="NZD">New Zealand Dollars - NZD</option>
            <option value="CHF">Switzerland Francs - CHF</option>
            ...
        </select>
    </div>


    <div id="to_select">
        <select name="to" id="to">
        <option selected="selected" value="EUR">Euro - EUR</option>
            <option value="USD">United States Dollars - USD</option>
            <option value="GBP">United Kingdom Pounds - GBP</option>
            <option value="CAD">Canada Dollars - CAD</option>
            <option value="AUD">Australia Dollars - AUD</option>
            <option value="JPY">Japan Yen - JPY</option>
            ...
        </select>
    </div>

        <div id="result"><i>getting info...</i></div>
        <input type="number" class="amount" name="amount" id="amount" value="1.00" autofocus/>
    </div>
    </body>
         <script>
            var rate = null;
             getRate = function() {
                // Getting Values
                var from = $('#from').val();
                var to = $('#to').val();
                url = "http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&calback=jsonpCallback";
                $.ajax({
                url: url,
                type: "POST",
                async: false,
                dataType: "jsonp",
                success : function(data) 
                {
                    rate = parseFloat(data.rate);
                }
                });
            };
            getRate();

            showConvertion = function(){
                var amount = $('#amount').val();
                result = amount * rate;
                // alert(result);
                $('#result').html(result.toFixed(2));
            };

            $(document).ready(function (){
                getRate();
                showConvertion();
            });
            $('#from').change(function (){
                getRate().then(showConvertion);
            });
            $('#to').change(function (){
                getRate().then(showConvertion);
            });

            $('#amount').keypress(function (){
                showConvertion();
            });
         </script>
</html>
4

1 に答える 1

1

問題は、あなたが synch と asynch をミックスしていることです:

$(document).ready(function ()
{
    getRate();
    showConvertion();
});

が呼び出されたときShowConvertion、getRate で行う AJAX 呼び出しはおそらくまだ返されていないため、でrate使用する変数ShowConvertionはおそらくその時点では設定されていません。ShowConvertion呼び出しを ajax 呼び出しの成功関数にラップする必要があります。

success : function(data) 
{
    rate = parseFloat(data.rate);
    showConvertion();
}
于 2013-06-10T14:26:30.480 に答える