一个函数中的全局变量赋值无法在另一个函数中访问
[英]Global variable assigned value in one function is not accessible in another
问题描述
我正在使用地理位置来收集坐标并进行API调用以获取华氏天气。 我正在为其中一个使用函数getWeatherByCoordinates(latitude, longitude)将温度添加到页面的函数中的全局变量tempNum分配此值。
稍后，我尝试访问此变量并将该值作为参数传递给另一个函数typeConversion ，该函数试图将温度值转换为摄氏温度。 它正在返回NaN并且在调试时，我不知道为什么。
这是我的HTML和JS。 我感觉自从我在全局级别声明了变量并在我为其分配值的函数中设置了“ return varName”之后，该值应该可以在我的整个JS中访问； 但我可能做错了一些或误解了变量范围。 请协助。
var place = document.getElementById("meat"); var header = document.getElementById("header"); var weather = document.getElementById("Weather"); var latitude; var longitude; var coordinates = document.getElementById("coordinates"); function success(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; getWeatherByCoordinates(latitude, longitude); }; //else { // //Write Code to alternatively show a Zip-Code Search Box; //}; navigator.geolocation.getCurrentPosition(success); var city = document.getElementById("city"); var weatherDescription = document.getElementById("weather-description"); var roundTempF; var roundTempC; var tempNum; var tempStringFFull function getWeatherByCoordinates(latitude, longitude) { var fullURL = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial"; $.getJSON(fullURL, function (data) { var tempString = data.main.temp; var tempNum = parseInt(tempString); roundTempF = Math.floor(tempNum); stringF = roundTempF.toString(); tempStringFFull = stringF + "\\xB0" + " F"; weather.innerText = tempStringFFull; city.innerText = data.name; weatherDescription.innerText = data.weather[0].description; if (data.dt > data.sys.sunrise && data.dt < data.sys.sunset) { $("#whole-page").removeClass("whole"); $("#whole-page").removeClass("night"); $("#whole-page").addClass("day"); } else { $("#whole-page").removeClass("whole"); $("#whole-page").removeClass("night"); $("#whole-page").addClass("night"); }; event.preventDefault(); }); return tempNum; }; function typeConversion(tempNum) { if (changeTempType.innerText === "Celsius") { var tempStringC; var celsiusDecimal = (tempNum - 32) * (5 / 9); roundTempC = Math.floor(celsiusDecimal); tempStringC = roundTempC.toString(); tempStringC += "\\xB0" + " C"; weather.innerText = tempStringC; changeTempType.innerText = "Farenheit"; return; } else if (changeTempType.innerText === "Farenheit") { weather.innerText = tempStringFFull; changeTempType.innerText = "Celsius"; return; } else { weather.innerText = "We are unable to retrieve the weather at this time. Please try again later"; changeTempType.innerText = "Celsius"; return; }; }; var changeTempType = document.getElementById("change-temp-type"); changeTempType.addEventListener("click", typeConversion, false);
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <title>Weather</title> </head> <body id="whole-page" class="whole"> <div class="wrapper"> <h2 id="header">Check the Current Temperaturate by Zip Code</h2> <label>Farenheit</label> <input type="radio" name="temp-type" value="C" id="Celsius-radio"/><label>Celsius</label>--> <button id="change-temp-type">Celsius</button> <form> <p>Enter the Zip Code to see the Weather there!</p> <input id = "Zip-Code" type="text"/> <input id = "submit-zip" type="button" value="Get Weather!"/> </form> <div> <h3 id="city"></h3> <h3 id= "Weather" class="temp-text"></h3> <h4 id="weather-description"></h4> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"> </script> <script src="javascript/main.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2018-02-02 19:16:41
您有几个问题：
- 您在函数中重新声明
var tempNum =，这意味着它将是一个只能在函数作用域内访问的新变量（保留全局变量不变） -
$.getJSON代码正在使用异步回调-这意味着它将比其下面的代码晚运行。 当您return tempNum，该代码尚未运行。 - 您的return语句实际上并没有做任何事情...仅重新分配全局变量就足够了。
更新-我最初错过的问题：
- 您正在
typeConversion“ tempNum”中命名函数参数。 同样，这将导致一个新变量，该变量只能在该函数的范围内访问。 如果要影响全局变量，则此函数完全不需要任何参数，然后tempNum将按预期引用全局变量。
我试图清除下面的所有问题。
var place = document.getElementById("meat"); var header = document.getElementById("header"); var weather = document.getElementById("Weather"); var latitude; var longitude; var coordinates = document.getElementById("coordinates"); function success(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; getWeatherByCoordinates(latitude, longitude); }; //else { // //Write Code to alternatively show a Zip-Code Search Box; //}; navigator.geolocation.getCurrentPosition(success); var city = document.getElementById("city"); var weatherDescription = document.getElementById("weather-description"); var roundTempF; var roundTempC; var tempNum; var tempStringFFull function getWeatherByCoordinates(latitude, longitude) { var fullURL = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial"; $.getJSON(fullURL, function (data) { var tempString = data.main.temp; // removed "var tempNum"... tempNum = parseInt(tempString); roundTempF = Math.floor(tempNum); stringF = roundTempF.toString(); tempStringFFull = stringF + "\\xB0" + " F"; weather.innerText = tempStringFFull; city.innerText = data.name; weatherDescription.innerText = data.weather[0].description; if (data.dt > data.sys.sunrise && data.dt < data.sys.sunset) { $("#whole-page").removeClass("whole"); $("#whole-page").removeClass("night"); $("#whole-page").addClass("day"); } else { $("#whole-page").removeClass("whole"); $("#whole-page").removeClass("night"); $("#whole-page").addClass("night"); }; event.preventDefault(); }); //return tempNum; }; // removed the argument "tempNum", just use the global function typeConversion() { if (changeTempType.innerText === "Celsius") { var tempStringC; var celsiusDecimal = (tempNum - 32) * (5 / 9); roundTempC = Math.floor(celsiusDecimal); tempStringC = roundTempC.toString(); tempStringC += "\\xB0" + " C"; weather.innerText = tempStringC; changeTempType.innerText = "Farenheit"; return; } else if (changeTempType.innerText === "Farenheit") { weather.innerText = tempStringFFull; changeTempType.innerText = "Celsius"; return; } else { weather.innerText = "We are unable to retrieve the weather at this time. Please try again later"; changeTempType.innerText = "Celsius"; return; }; }; var changeTempType = document.getElementById("change-temp-type"); changeTempType.addEventListener("click", typeConversion, false);
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <title>Weather</title> </head> <body id="whole-page" class="whole"> <div class="wrapper"> <h2 id="header">Check the Current Temperaturate by Zip Code</h2> <label>Farenheit</label> <input type="radio" name="temp-type" value="C" id="Celsius-radio"/><label>Celsius</label>--> <button id="change-temp-type">Celsius</button> <form> <p>Enter the Zip Code to see the Weather there!</p> <input id = "Zip-Code" type="text"/> <input id = "submit-zip" type="button" value="Get Weather!"/> </form> <div> <h3 id="city"></h3> <h3 id= "Weather" class="temp-text"></h3> <h4 id="weather-description"></h4> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"> </script> <script src="javascript/main.js"></script> </body> </html>
最后说明-如果稍后需要访问tempNum的函数运行（例如响应用户操作），则此方法会很好地工作。 页面加载后可能仍然有几毫秒未定义，因此，如果您尝试在页面加载时正确使用它，则可能仍未定义。 在这种情况下，您可能需要将其初始化为某个默认值。
希望这可以帮助。
如何在一个函数中声明全局变量赋值并在javascript中的另一个函数中使用
[英]how to declare a global variable assign value in one function and use in another function in javascript
如何在最初在ready函数中分配值的jquery函数中使用全局变量
[英]How to use global variable in a jquery function whose value was initially assigned on ready function
如何知道何时将新值分配给回调函数（JavaScript）中的全局变量
[英]How to know when the new value is assigned to global variable in callback function (JavaScript)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.