There are a few issues with the code provided. Since all functions and variables are defined inside the document.ready, they cannot be accessed outside of it. This results in an error when attempting to call 'testWeather' on a click event, as it is not defined outside of the document.ready. To address this issue (make variables and functions global), it is recommended to define all variables outside of the document.ready. Only the following two lines should remain inside the document.ready:
$(".cityarea").html(getLocation);
testMenu();
By making this adjustment, the issue of 'testWeather' not being defined will be resolved. Additionally, within the code, there is another problem where the property testLocation is used within the testWeather function without being defined. Instead of testLocation, the variable mainCities should be utilized. Implementing these two changes will ensure that the app runs smoothly without any errors. Below is the corrected JavaScript code. Furthermore, there is a minor issue with how the current city is being read from the code.
$(document).ready(function () {
$(".cityarea").html(getLocation);
testMenu();
});
var currentLat;
var currentLong;
var currentCity;
var currentRegion;
var currentCountry;
var mainCities = {
'San_Francisco': {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St._Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
}
};
function testMenu() {
for (var place in mainCities) {
var city = place.replace(/_/g, ' ');
$('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>");
}
};
function testWeather(cityLocation) {
currentLat = mainCities[cityLocation].lat;
currentLong = mainCities[cityLocation].lon;
currentRegion = mainCities[cityLocation].region;
currentCity = mainCities[cityLocation];
currentCountry = mainCities[cityLocation].country;
getWeather();
};
function getLocation() {
$.getJSON('http://ip-api.com/json/?callback=?', function (data) {
currentRegion = data.regionName;
currentCity = data.city;
currentCountry = data.country;
currentLat = data.lat;
currentLong = data.lon;
//$("#cityname").text(currentCity);
getWeather();
});
};
function getWeather() {
$("#cityname").text(currentCity);
$("#state").text(currentRegion);
$("#country").text(currentCountry);
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function (json) {
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5 / 9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function () {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
//$('#temp').toggleClass('toggle');
});
});
};