I have been working on this project for a while, but for some reason, the data won’t show up on the actual page, and I don’t know why. Here is the link to my project: http://codepen.io/ElisaL/pen/YNzada
I opened up your page and then displayed the error console which shows the error messages below. I’m using Safari on macOS, but Chrome and Firefox both have Developer options to let you display the console. Hopefully these messages will give you more to go on.
[Error] Error while parsing the 'sandbox' attribute: 'allow-modals' is an invalid sandbox flag. (YNzada, line 307)
[Error] [blocked] Access to geolocation was blocked over insecure connection to http://s.codepen.io.
Global Code (YNzada:68)
[Error] ReferenceError: Can't find variable: weatherType
(anonymous function) (YNzada:84)
i (jquery.min.js:2:27157)
fireWith (jquery.min.js:2:27916)
ready (jquery.min.js:2:29719)
J (jquery.min.js:2:29898)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (weather, line 0)Alright well there are a couple of issues with your code. Foremost, you’re scoping your variable locally, and then calling on them outside of their scope. Javascript will lock variables to only be used in the function or control statement their created in. This is actually a fundamental aspect of coding in JavaScript, and you can read up on it here. Long story short, declare your variables in the global scope or just within your document.ready jQuery function.
Secondly, my Firefox debugger is saying ReferenceError: weatherType is not defined. This could be caused by a number of issues including the requested data being corrupt/server down, the Ajax request failing, or just my computer not giving access to my location (I run on Linux, it does a lot of stuff without telling me 
). However, I get the felling that the error is due to your Ajax call returning an error rather than a success. If you use the $.getJSON function it returns an error silently. Using the more generic $.ajax function takes a bit more boilerplate setup but gives you a lot more control over your ajax calls so I recommend using it until you become completely comfotable with ajax calls, you can read up on it here. $.getJSON is a shorthand function, and should be treated as such. Moving on I would look into JSONP, you have to use it sometimes with Codepen rather then JSON since you’re requesting data from one online URL to another online URL, which codepen will block for security reasons, you can read up on that here
Lastly, clean up your code a bit m8 
, proper indentation and such. Nothing will annoy people reading your code more than messy syntax, its just good habit
EDIT: Also, realized your api URL throw’s a 404 error. Your string has lat=latitude and lon=longitude as a string. Instead, it should be “lat=” + latitude + “lon=” + longitude. That way it inputs the variables values, rather than just the words ‘latitude’ and ‘longitude’
Thank you so much for the error code!
Your reply helped me so much! It totally works now, thank you so much for the help!
(PS I also cleaned up my code 
)
No prob 
