Javascript function result not showing up on HTML page

1

I am working on a script that converts directional degrees to 16 point cardinal direction. I am getting the proper results when I run it with console.log but I cannot get the variable to appear on the page when I set the the HTML div to the variable. I just cannot figure out why I’m not getting the variable to the page. Sure could use some assistance. Thanks!

Script

 var settings = {"url": 
"https://api.stormglass.io/v1/weather/point?;lat=40.370181&lng=-73.934193&key=my_key",
"method": "GET",
 "timeout": 0,
};

$.ajax(settings).done(function(response) {
    console.log(response);
    var degrees = response.hours[17].windDirection[1].value;
    var iconwndr24 = degToCompass(degrees);
   return iconwndr24;
  $("#iconwndr24").text(iconwndr24);
});

function degToCompass(num) {
while (num < 0) num += 360;
while (num >= 360) num -= 360;
val = Math.round((num - 11.25) / 22.5);
arr = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE",
  "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"
];

return arr[Math.abs(val)];

};

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<meta charset="utf-8"/>
  <title>API TEST</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>


</head>
<body>
<script src="functiontest.js"></script>

      <div id="iconwndr24"></div>
        </body>
</html>
2 
   var iconwndr24 = degToCompass(degrees);
   return iconwndr24;
  $("#iconwndr24").text(iconwndr24);

You can’t return like that it doesn’t do anything that is an anonymous function, remove the return statement and you should be good

3

Doh. I knew I was missing something! Thank you!

1 Like