HTML button not displaying OpenWeather API Data
<p>I have created some code which should display some data from the openweather API after you type in the city and the country. It currently does nothing after clicking on the submit button.</p>

<p>This is my HTML file: Index.html</p>

<p>
</p>

<pre><code>&lt;head&gt;
    &lt;title&gt;Open Weather API&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="mainWeather.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="userArea"&gt;
        &lt;div id="stateWrapper"&gt;
            &lt;input type="text" id="cityInput" placeholder="Enter a State"/&gt;
        &lt;/div&gt;
        &lt;br/&gt;
        &lt;div id="countryWrapper"&gt;
             &lt;input type="text" id="countryInput" placeholder="Enter a Country"/&gt;
        &lt;/div&gt;
        &lt;br/&gt;
        &lt;div id="buttonArea"&gt;
            &lt;input type="submit" id="submitWeather"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!- USED TO SHOW RESULT --&gt;
    &lt;div id="weatherWrapper"&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>In my code I have changed the "Key" to my actual Key</p>

<p>Here is my JavaScript file: mainWeather.js</p>

<pre><code>var mainWeather = {
    init: function () {
        $("#submitWeather").click(function () {
            return mainWeather.getWeather();
        });
    },

    getWeather: function () {
        $.get('http://api.openweathermap.org/data/2.5/weather?q=' + $("#cityInput").val() + "," + $("#countryInput").val() + "Key", function (data) {
            var json = {
                json: JSON.stringify(data),
                delay: 1
            };
            echo(json);
        });
    },

    //Prints result from the weatherapi, receiving as param an object
    createWeatherWidg: function (data) {
        return "&lt;div class='pressure'&gt; &lt;p&gt;Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C&lt;/p&gt;&lt;/div&gt;" +
            "&lt;div class='description'&gt; &lt;p&gt;Title: " + data.weather[0].main + "&lt;/p&gt;&lt;/div&gt;" +
            "&lt;div class='description'&gt; &lt;p&gt;Description: " + data.weather[0].description + "&lt;/p&gt;&lt;/div&gt;" +
            "&lt;div class='wind'&gt; &lt;p&gt;Wind Speed: " + data.wind.speed + "&lt;/p&gt;&lt;/div&gt;" +
            "&lt;div class='humidity'&gt; &lt;p&gt;Humidity: " + data.main.humidity + "%&lt;/p&gt;&lt;/div&gt;" +
            "&lt;div class='pressure'&gt; &lt;p&gt;Pressure: " + data.main.pressure + " hpa&lt;/p&gt;&lt;/div&gt;";
    }
};

var echo = function (dataPass) {
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: dataPass,
        cache: false,
        success: function (json) {
            var wrapper = $("#weatherWrapper");
            wrapper.empty();
            wrapper.append("&lt;div class='city'&gt; &lt;p&gt;Place: " + json.name + ", " + json.sys.country + "&lt;/p&gt;&lt;/div&gt;");
            wrapper.append(mainWeather.createWeatherWidg(json));
        }
    });
};

mainWeather.init();
</code></pre>

<p>I cant seem to figure out why it isnt working, The two files are in the same folder.</p>