Why there is a NaN?

Question

Before click:

After click:

$(document).ready(function () {
            var output = document.getElementById("whole");
            if (!navigator.geolocation) {
                $("#whole").html("<p>Your brower is not supported</p>");
                return;
            }

            function success(position) {
                var lan = position.coords.latitude;
                var lon = position.coords.longitude;

                $.ajax({
                    url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lan + "&lon=" + lon + "&APPID=f06e25b1205b65171ad01524870cbb01",
                    success: function (data) {
                        $("#temp").text(Math.round(data.main.temp - 273.15));
                    }
                });
            }

            function error() {
                output.innerHTML = "Unable to retrieve your location";
            }

            navigator.geolocation.getCurrentPosition(success, error);

            var ce = parseInt($("#temp").text(), 10);
            var fa = Math.round(ce * 1.8 + 32);

            $("a").on("click", function () {
                if ($(this).text() == "℃") {
                    $(this).html("℉");
                    $("#temp").text(fa);
                } else {
                    $(this).html("℃");
                    $("#temp").text(ce);
                }
            });

        });

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <span id="temp"></span><a id="toggle" href="javascript:void(0)">℃</a>

I want to achieve this,when I click the Celcius character,the Celius degree will change into Fahrenheit degree.Because the code need the location, so running the snippet will throw an error.I don't know why there is a NaN.But didn't work. Why?

Gabriele Petrioli · Accepted Answer · 2016-12-02T09:38:37.207

Those variables are not global since the are declared in the scope of the ready function.

Use their names directly (without the window) as your click handler is also in the same scope.

document).ready(function () {
    var ce = parseInt($("#temp").text(), 10);
    var fa = Math.round(ce * 1.8 + 32);

    $("a").on("click", function () {
        if ($(this).text() == "℃") {
            $(this).html("℉");
            $("#temp").text(fa);
        } else {
            $(this).html("℃");
            $("#temp").text(ce);
        }
    });
});

Update

The problem is that the #temp element has no value at the time you run the code, since it is filled from an AJAX call (which is asynchronous and completes at a later time)

You should put the parsing code inside the success callback of the AJAX.

$(document).ready(function () {
            var output = document.getElementById("whole");
            var ce, fa;
            if (!navigator.geolocation) {
                $("#whole").html("<p>Your brower is not supported</p>");
                return;
            }

            function success(position) {
                var lan = position.coords.latitude;
                var lon = position.coords.longitude;

                $.ajax({
                    url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lan + "&lon=" + lon + "&APPID=f06e25b1205b65171ad01524870cbb01",
                    success: function (data) {
                        ce = Math.round(data.main.temp - 273.15);
                        fa = Math.round(ce * 1.8 + 32);
                        $("#temp").text( ce );
                    }
                });
            }

            function error() {
                output.innerHTML = "Unable to retrieve your location";
            }

            navigator.geolocation.getCurrentPosition(success, error);

            $("a").on("click", function () {
                if ($(this).text() == "℃") {
                    $(this).html("℉");
                    $("#temp").text(fa);
                } else {
                    $(this).html("℃");
                    $("#temp").text(ce);
                }
            });

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="temp"></span><a id="toggle" href="javascript:void(0)">℃</a>

The code I post before is a snippet of my whole work.Your answer can solve the question before.But just can't solve my whole work's problem.I update the question.Can you have a look? — Gaby, Dec 02 '16 at 09:25
After the `#temp` element is filled from the Ajax call, clicking the `#temp` element , the two line: `var ce = parseInt($("#temp").text(), 10);` and `var fa = Math.round(ce * 1.8 + 32);` didn't excute? — Gaby, Dec 02 '16 at 09:52
In your original code, the `var ce=...` and `var fa = ..` had run once on page load, when the `#temp` element was empty. It did not run again on `click` since it was outside of that handler. — Gabriele Petrioli, Dec 02 '16 at 09:54
I cannot completely agree with you. In my original code,the Ajax call is executed before the `var ce = ...` and `var fa = ...`.It can't be empty? — Gaby, Dec 02 '16 at 10:03
I am new fresher of JS. I guess `var fa = ... ` and `var ce = ...` annoucement will be check first before the script is excuted? so thats make sense. — Gaby, Dec 02 '16 at 10:13
@gaby read http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 for a good explanation of what AJAX stands for and how it works. — Gabriele Petrioli, Dec 02 '16 at 10:15

Pawan Lakhara · Answer 2 · 2016-12-02T09:16:52.293

Try this. check this Link

 <span id="temp">178</span><a id="toggle" href="javascript:void(0)">℃</a>
    window.ce;
    window.fa;
$(document).ready(function () {
         ce = parseInt($("#temp").text(), 10);
         fa = Math.round(ce * 1.8 + 32);
        $("a").on("click", function () {
            if ($(this).text() == "℃") {
                $(this).html("℉");
                $("#temp").text(window.fa);
            } else {
                $(this).html("℃");
                $("#temp").text(window.ce);
            }
        });
    });

Why there is a NaN?

2 Answers2