无法获取json对象

Question

I am trying to get city name from input element and then get the weather information and also timezone information of the city from API. However i can't get the json object in that function but it works outside the function. Can anyone help me?

 var d = "Lisbon"; $(document).ready(function() { $("#button").click(function() { d = document.getElementById("input").value; $(document).ready(function myfunction() { $.getJSON('http://api.openweathermap.org/data/2.5/weather?APPID=11d324c05e02e308c1c9eb8d8041b143&q=' + d + '&units=metric', function(data) { document.getElementById("city").innerHTML = data.name + ", " + data.sys.country; document.getElementById("wind").innerHTML = data.wind.speed + " m/s "; document.getElementById("cloudiness").innerHTML = data.weather[0].description; document.getElementById("pressure").innerHTML = data.main.pressure + " hpa"; document.getElementById("humidity").innerHTML = data.main.humidity + " %"; document.getElementById("coord").innerHTML = "[ " + data.coord.lat + ", " + data.coord.lon + " ]"; document.getElementById("temperature").innerHTML = data.main.temp + "°C"; document.getElementById("icon").innerHTML = "<img src=http://openweathermap.org/img/w/" + data.weather[0].icon + ".png" + ">"; console.log(data); (function() { $.getJSON("http://api.geonames.org/timezoneJSON?" + "lat=" + data.coord.lat + "&" + "lng=" + data.coord.lon + "&username=hrrs", function(data) { document.getElementById("time").innerHTML = data.time; document.getElementById("timeCity").innerHTML = data.timezoneId; document.getElementById("country").innerHTML = data.countryName; document.getElementById("sunrise").innerHTML = data.sunrise; document.getElementById("sunset").innerHTML = data.sunset; console.log(data); }); })(); }); document.getElementById("slayt").innerHTML = '<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?tag=' + d + '&amp;width=1920&amp;height=500&amp;" frameborder="0" width="1920" height="500" scrolling="no" marginwidth="0" marginheight="0"></iframe>'; })(); }); }); 

Answer 1

Is this what you are trying to achieve? http://jsfiddle.net/wnunhhac/

<input type="text" id="inputCity" value="Zurich"/>
<input type="button" id="start" value="Go" />   
<br />
<span id="city">click go</span>

$(document).ready(function() {
    $("#start").click(function() {
      var d = $("#inputCity").val();
      $.getJSON('http://api.openweathermap.org/data/2.5/weather?APPID=11d324c05e02e308c1c9eb8d8041b143&q=' + d + '&units=metric', function(data) {
        $("#city").html(data.name);          
      });
    });
});

The API returns status code 404 not found, if the city is invalid. So you should code an appropriate resonse.

if (data.cod === "404") {
  // Api could not find city
  return;
}

Also I changed the button type to "button" instead of "submit"

<button type="button" id="button" class="btn btn-default">

Corresponding Fiddle: http://jsfiddle.net/xvn6f05w/