为什么会有 NaN？答案

【问题标题】：Why there is a NaN?为什么会有 NaN？
【发布时间】：2016-12-02 17:39:50
【问题描述】：

点击前：

点击后：

$(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>

我想实现这个，当我点击摄氏度字符时，摄氏度会变成华氏度。因为代码需要位置，所以运行sn -p会报错。不知道为什么是 NaN。但是没有用。为什么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这些变量不是全局变量，因为它们是在 ready 函数的范围内声明的。

直接使用他们的名字（没有window）因为你的click处理程序也在同一个范围内。

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

更新

问题在于 #temp 元素在您运行代码时没有任何值，因为它是通过 AJAX 调用填充的（这是异步的，稍后会完成）

你应该把解析代码放在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>

【讨论】：

我之前发布的代码是我整个工作的sn-p。你的回答可以解决之前的问题。但不能解决我的整个工作的问题。我更新问题。你能有吗看看？
从Ajax调用填充#temp元素后，点击#temp元素，var ce = parseInt($("#temp").text(), 10);和var fa = Math.round(ce * 1.8 + 32);这两行没有执行？
在您的原始代码中，var ce=... 和 var fa = .. 在页面加载时运行了一次，此时 #temp 元素为空。它没有在click 上再次运行，因为它在该处理程序之外。
我不能完全同意你的看法。在我的原始代码中，Ajax调用是在var ce = ...和var fa = ...之前执行的。不能为空吗？
我是 JS 的新手。我猜var fa = ... 和var ce = ... 会在脚本执行之前先检查一下？所以这是有道理的。

【解决方案2】：

试试这个。检查这个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);
            }
        });
    });

【讨论】：