Show Local Weather - toggling metric/imperial units

Hi all,

I’ve hit a wall with an aspect of this project. I’ve coded a way for my units to show as metric & imperial. It is dependant on the var metric. if metric = true it shows metric, & if metric = false imperial. This works when I set metric manually. Code looks like this:

  var metric = true;

  //unit convert
  if (metric === true) {
    units = "&units=metric";
    degrees = "°C";
    windSpeed = "m/s";
    $("#units").html("(°C)");
  } else {
    units = "&units=imperial";
    degrees = "°F";
    windSpeed = "mph";
    $("#units").html("(°F)");
  }

Next I’m trying to make a div button so that when a user clicks on it the variable metric changes to false, or vice versa, and thus changes the units. I’ve coded this without any luck so far:

$("#unitToggle").click(function() {
    if (metric === true) {
      metric = false;
    } else {
      metric = true;
    }
  });

Anyone able to let me know where I’m going wrong? My codepen is here if needed: http://codepen.io/doug20000/pen/eBrGmJ?editors=1010

You have to put all your “unit convert” code into your click function. Otherwise your “unit convert” code is just sitting there.

Ahh thank you! Your advice got me thinking in the right direction. Ultimately to make it work I had to encase most of my code in a function, and put my toggle outside of it. Then I could call the function with the updated variables at will. It was a struggle, but we got there in the end!