Display temp from weather API

Question

I need to identify and fix the error. What am I missing here and why? The temperature does not display.

<script type="text/javascript">
  $.ajax({
    url: 'https://api.weather.gov/gridpoints/EWX/155,90/forecast/hourly'
  }).done(function(res) {
    var temp = res.properties.periods[0].temperature;
  });
  document.getelementbyid('temperature').innerHTML = temp
</script>
<p>
  The temperature is <span id="temperature"></span>F.
</p>

getelementbyid might not work careful to capital letters : correct form is document.getElementById('temprature') — Met Br, Mar 03 '21 at 19:44
You can move `document.getelementbyid('temperature').innerHTML = temp` inside done callback. — Hassan Imam, Mar 03 '21 at 19:57

score 0 · Accepted Answer · answered Mar 03 '21 at 19:58

The issue here is two-fold. The first is that there is a scoping issue trying to bring "temp" outside of when it will be ready. That is only set within the .done() call.

The second issue found is that the document.getelementbyid should be document.getElementById() as per the specification https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

<script type="text/javascript">
$(function() {
  $.ajax({
    url: 'https://api.weather.gov/gridpoints/EWX/155,90/forecast/hourly'
  }).done(function(res) {
      document.getElementById('temperature').innerHTML = res.properties.periods[0].temperature;
  });
});
</script>
<p>
    The temperature is <span id="temperature"></span>F.
</p>

Display temp from weather API

1 Answers1