HTML按鈕不顯示OpenWeather API數據

我創建了一些代碼，在鍵入城市和國家後應該顯示來自openweather API的一些數據。點擊提交按鈕後，它目前沒有任何操作。HTML按鈕不顯示OpenWeather API數據

這是我的HTML文件：的Index.html

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

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

在我的代碼我已經改變了「重點」，以我的實際重點

這裏是我的JavaScript文件：mainWeather.js

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 "<div class='pressure'> <p>Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C</p></div>" + 
      "<div class='description'> <p>Title: " + data.weather[0].main + "</p></div>" + 
      "<div class='description'> <p>Description: " + data.weather[0].description + "</p></div>" + 
      "<div class='wind'> <p>Wind Speed: " + data.wind.speed + "</p></div>" + 
      "<div class='humidity'> <p>Humidity: " + data.main.humidity + "%</p></div>" + 
      "<div class='pressure'> <p>Pressure: " + data.main.pressure + " hpa</p></div>"; 
    } 
}; 

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

mainWeather.init();

我似乎無法弄清楚爲什麼它不工作，這兩個文件在同一個文件夾中。

來源

2016-08-17 Luke Rayner

在控制檯中的任何錯誤？你說這兩個文件在同一個文件夾中，但是在HTML中你的''script type =「text/javascript」src =「resources/js/mainWeather.js」>'暗示它應該在一個名爲「資源/ js「 – ADyson

哦，對不起，我確實把它放在那個文件夾中，但是我搬了它，忘了更改代碼哎呀！我已經改變了代碼，它仍然沒有工作，並沒有在控制檯中的錯誤 –

變化

$("#submitWeather").click(function() { 
     return mainWeather.getWeather(); 
    });

到

$("#submitWeather").click(function (event) { 
     event.preventDefault(); 
     return mainWeather.getWeather(); 
    });

此：

event.preventDefault();

將回發停止頁面。由於「#submitWeather」是類型爲「submit」的輸入，因此在運行javascript之前，默認會導致完整頁面回發。其次，將整個mainWeather.js包裝在$（function（）{...}）中;塊。我發現，在它應該處理的元素已經被渲染之前，正在設置點擊事件處理程序。該塊將使代碼等待，直到整個文檔準備就緒。

來源

2016-08-17 14:34:51 ADyson

我添加了代碼，它似乎仍然工作，它不會顯示數據後單擊按鈕 –

嘗試包裝整個mainWeather.js $（function（）{...}）;塊。我發現，在它應該處理的元素已經被渲染之前，正在設置點擊事件處理程序。該塊將使代碼等待，直到整個文檔準備好 – ADyson

我試過，它仍然沒有工作:( –

HTML按鈕不顯示OpenWeather API數據

回答

相關問題