拆分文件后调用OpenWeatherMap API无结果显示的问题排查

核心问题：脚本执行时机错误 #

你的script.js被放在<head>中加载，此时页面的DOM元素（比如cityform表单）还未渲染完成，导致document.getElementById("cityform")返回null，后续的表单提交事件监听根本没有绑定成功。这就是拆分文件后失效的原因——合并文件时你大概率把脚本放在了<body>末尾，DOM已经加载完成，所以能正常运行。

修复方法 #

有两种可行的修复方式：

方法一：调整脚本引用位置 #

把script.js和jQuery的引用移到<body>标签的最后，确保所有DOM元素加载完成后再执行脚本：

<body>
    <h1>Weather Report</h1>
    <form id="cityform">
      <label for="thecity">City:</label><br>
      <input type="text" name="thecity" id="thecity"><br><br>
      <button type="submit">Search</button>
    </form>
    <div id="results"></div>

    <!-- 脚本移到此处 -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>

方法二：在script.js中监听DOM加载完成事件 #

如果不想移动脚本位置，就在script.js的代码外层包裹DOMContentLoaded事件，确保DOM加载完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
  var cityform = document.getElementById("cityform");
  
  if (cityform !== null) {
    cityform.addEventListener("submit", function(event) {
      event.preventDefault();

      var cityInput = document.getElementById("thecity");

      if (cityInput !== null) {
        var city = cityInput.value;

        $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data){
          console.log(data);

          var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
          var temp = Math.floor(data.main.temp) + "F"; 
          var weather = data.weather[0].main;

          var results = document.getElementById("results");
          
          results.innerHTML = "<img src='" + icon + "'> <p>" + weather + "</p> <p>" + temp + "</p>";
        })
        // 新增请求失败处理，避免无反馈
        .fail(function() {
          var results = document.getElementById("results");
          results.innerHTML = "<p>无法查询该城市天气，请检查城市名称是否正确</p>";
        });
      }
    });
  }
});

关于结果展示 #

你的原有代码已经能正确将天气图标、温度和天气状况渲染到results元素中。建议加上上述代码中的.fail()错误处理逻辑，当用户输入无效城市名称或API请求失败时，能给用户明确的反馈，避免页面无响应。

内容的提问来源于stack exchange，提问作者Bruce Reyes