Show Local Weather - toggling metric/imperial units

#1

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

#2

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

#3

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!

#4