I am having trouble figuring out why I am getting an error in the console log telling me that the function weather() is undefined. I researched the issue and the only thing I could find was information about lexical scopes but that didn't seem to fix the error I was getting. Can someone tell me what I am doing wrong?
This was a test application I am working on for learning purposes so I can fix some issues on an application at work.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" src="main.css">
<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>The content of the document......</h1>
<input type="button" name="City: " value="London" onclick="weather()">
<script type="text/javascript">
var api_path = "http://api.openweathermap.org/data/2.5/weather?q="
var city = "London"
var api_key = "&appid=988bd58ad518778f5761aad912ed1ce8";
function weather (){
$.getJSON(api_path + city + api_key, function(data) {
var items = [];
$.each(data, function(key, value){
items.push( "<li id='" + key + "'>" + value + "</li>" );
});
.appendTo( "body" );
});
};
weather();
</script>
</body>
</html>
