title: Javascript - Getting null error despite using onreadystatechange
body: <p>. Hello y'all, I'm trying to implement <a href="https://fourtonfish.makes.org/thimble/make-your-own-web-mashup-introduction-to-web-apis" rel="nofollow">this</a> tutorial as a module in a page but I am getting a "weatherData.temperature is null" error. </p>
  
  <p>I had previously been getting a "weatherData.city is null" error but fixed it by using onreadystatechange on the js. </p>
  
  <p>I get that before I was getting the error because I was trying to setInnerHTML to something that was null because I hadn't wrapped the script in the onreadystatechange but now I'm stumped as to why I'm getting a similar error for a different line of code. </p>
  
  <p>If anyone could tell me what I'm doing wrong it would be very much appreciate! Thank you so much! </p>
  
  <p>(And yes, for reasons beyond my control I cannot separate the html and js on the page. I know. I know...)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="weather-web-app"&gt;
      &lt;section&gt;
          &lt;h1 id="city"&gt;Weather Web App&lt;/h1&gt;
          &lt;p&gt;
              &lt;a href="temperature" href="#" onclick="switchUnits(); return false;" title="Click to switch between metric and imperial units"&gt;
              &lt;/a&gt;
              &lt;span id="weather"&gt;
                  Current temperature and weather conditions
              &lt;/span&gt;
          &lt;/p&gt;
      &lt;/section&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&lt;script&gt;
  document.onreadystatechange = function(){
      var weatherData = {
          city:               document.querySelector("#city"),
          weather:            document.querySelector("#weather"),
          temperature:        document.querySelector("#temperature"),
          temperatureValue:   0,
          units:              "°C"
      };
  
      function switchUnits(){
          if (weatherData.units == "°C"){
              weatherData.temperatureValue = weatherData.temperatureValue * 9/5 + 32;
              weatherData.units = "°F";
          } else {
              weatherData.temperatureValue = (weatherData.temperatureValue - 32) * 5/9;
              weatherData.units = "°C";
          }
  
          weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units + ", ";      
      }
  
      function getLocationAndWeather(){
          if (window.XMLHttpRequest){
              var xhr = new XMLHttpRequest();
              xhr.addEventListener("load", function() {
                  var response = JSON.parse(xhr.responseText);
  
                  console.log(response);
                  var position = {
                      latitude:   response.latitude,
                      longitude:  response.longitude
                  };
                  var cityName = response.city;
  
                  var weatherSimpleDescription    = response.weather.simple;
                  var weatherDescription          = response.weather.description;
                  var weatherTemperature          = response.weather.temperature;
  
                  weatherData.temperatureValue = weatherTemperature;
  
                  loadBackground(position.latitude, position.longitude, weatherSimpleDescription);
  
                  weatherData.city.innerHTML          = cityName;
                  weatherData.weather.innerHTML       = ", " + weatherDescription;
                  weatherData.temperature.innerHTML   = weatherTemperature + weatherData.units;
              }, false);
  
              xhr.addEventListener("error", function(err){
                  alert("Could not complete the request");
              }, false);
  
              xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=YOUROPENWEATHERMAPKEY&amp;units=metric", true);
              xhr.send();
          } else {
              alert("Unable to fetch location and weather data.");
          }           
      }
  
      function loadBackground(lat, lon, weatherTag) {
          var script_element = document.createElement('script');
  
          script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=YOURFLICKRAPIKEY&amp;lat=" + lat + "&amp;lon=" + lon + "&amp;accuracy=1&amp;tags=" + weatherTag + "&amp;sort=relevance&amp;extras=url_l&amp;format=json";
  
          document.getElementsByTagName('head')[0].appendChild(script_element);
      }
  
      function jsonFlickrApi(data){
          if (data.photos.pages &gt; 0){
              var photo = data.photos.photo[0];
              document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')";
              document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id);
          } else {
              document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
              document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");
          }
      }
  
      getLocationAndWeather();
  }
  &lt;/script&gt;
  </code></pre>