Javascript function result not showing up on HTML page

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!


 var settings = {"url": 
"method": "GET",
 "timeout": 0,

$.ajax(settings).done(function(response) {
    var degrees = response.hours[17].windDirection[1].value;
    var iconwndr24 = degToCompass(degrees);
   return 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)];



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

<meta charset="utf-8"/>
  <title>API TEST</title>
<script src=""

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

      <div id="iconwndr24"></div>
   var iconwndr24 = degToCompass(degrees);
   return 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

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

1 Like