Javascript in HTML works on locally but not when deployed to a server

Question

I have been building a web app and yesterday I tried to add some weather data to it. I built this short HTML document and it works perfectly when viewed in the browser. However, today I deployed to Zeit and Firebase Hosting, but the Javascript failed to execute and nothing happened. As you can see here ( http://imgur.com/a/TFnEi ), there aren't any errors. How can I fix that?

<!DOCTYPE html>
<html>

<head>
  <title>Display Weather</title>
</head>

<body>
  <style>
  h1{
     font-family: Arial;
     margin:auto;
     }
  p{
     font-family: Arial;
     margin:auto;
     }
     img{
        border: 2px solid blue;
        border-radius: 10px;
        }
  </style>
  <h1> Current weather in Berlin: </h1>
  <p id="forecast_metric">Gathering data...</p>
  <p id="temp_c">Gathering data...</p>
  <p id="WIP">No data</p>
  <p id="weathercond">Gathering data...</p>
  <p id="visibility">Gathering data...</p>
  <p id="updated">Gathering data...</p>
  <img id="weathericon" src="test.png">
  <script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "http://api.wunderground.com/api/APIKEY/conditions/forecast/q/Germany/Berlin.json", true);
  xhr.send();

  xhr.onreadystatechange = processRequest;

   function processRequest(e) {
   if (xhr.readyState == 4 && xhr.status == 200) {
         var response = JSON.parse(xhr.responseText);

         var temp_c = response.current_observation.temp_c
         var weathercond = response.current_observation.weather
         var weathericon = response.current_observation.icon_url
         var updated = response.current_observation.observation_time
         var visibilitykm = response.current_observation.visibility_km

         alert('The temperature is ' + temp_c + ' degrees Celsius in Berlin right now. The Forecast for ' + response.forecast.txt_forecast.forecastday[1].title + ' is : ' + response.forecast.txt_forecast.forecastday[1].fcttext_metric);
         document.getElementById("forecast_metric").innerHTML =  "The current forecast for today is: " + response.forecast.txt_forecast.forecastday[1].fcttext_metric
         document.getElementById("temp_c").innerHTML =  "Temperature: " + temp_c + " degrees Celsius"
         document.getElementById("weathercond").innerHTML =  "Weather: " + weathercond
         document.getElementById("visibility").innerHTML =  "Visibility: " + visibilitykm + " km"
         document.getElementById("updated").innerHTML =  updated
         document.getElementById("weathericon").src = weathericon;
    }

  }

  </script>

</body>

</html>

Edit: I found the problem - the browser wasn't accepting HTTP and required HTTPS instead. Thanks for your answers though!

Answer 1

This is just a guess - but maybe it is you APIKEY which is not valid from the domain?

http://api.wunderground.com/api/APIKEY

Open the DEV console in Chrome and it may be helpful to you!

See https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

When I open it with an incorrect APIKEY I receive:

{
  "response": {
  "version":"0.1",
  "termsofService":"http://www.wunderground.com/weather/api/d/terms.html",
  "features": {
  }
        ,
    "error": {
        "type": "keynotfound"
        ,"description": "this key does not exist"
    }
    }
}

To see if this is your issues, open the DEV console, click on the XHR tab and if you receive the same or similar response as above - your APIKEY is not valid.

I hope this helps!

Javascript in HTML works on locally but not when deployed to a server

Question

1 answers

solution1
-2 2017-01-23 16:47:12

Javascript in HTML works on locally but not when deployed to a server

Question

1 answers

solution1 -2 2017-01-23 16:47:12

solution1
-2 2017-01-23 16:47:12