Javascript Click Function doesn't work

Question

I'm working on a little weather app. The last thing I'm trying to do is making the big weather Icon clickable to switch the ° unit between Fahrenheit and Celsius.

My code doesn't seem to do anything. I would appreciate if someone could guide me in the right direction or give me a hint, how I should approach something like that.

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    ausgabeLocation.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  var lon = position.coords.longitude;
  var lat = position.coords.latitude;
  var jsonURL = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=imperial&APPID=';
  getWeather(jsonURL, lon, lat);
}

function getWeather(jsonURL, lon, lat) {

  $.getJSON(jsonURL, function(json) {
    var tempFahr = json['main']['temp'];
    var tempCels = Math.floor(((tempFahr - 32) / 1.8) * 100) / 100;
    var iconID = json['weather'][0]['id'];
    var city = json['name'];
    ausgabeLocation.innerHTML = city;
    ausgabeTemp.innerHTML = tempCels + "°C";
    $("#iconShow").html("<i class='owf owf-" + iconID + "'></i>");
  });
}

$(document).ready(function() {
  getLocation();
  var unitSwitch = false;
  $('.swapUnit').click(function() {
    if (unitSwitch) {
      $(this).html(tempCels + " '°C'");
      unitSwitch = false;
    } else {
      $(this).html(tempFahr + " '°F'");
      unitSwitch = true;
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1 id="ausgabeLocation" class="text-center"></h1>
  <div id="cont-center" class="box container-fluid box-shadow">


    <span id="iconShow" class="icon1"></span>
    <div id="ausgabeTemp" class="swapUnit">
      </h2>
    </div>

</body>

You can look at the whole thing here: http://codepen.io/ttimon/pen/QEPZJW

Thank you.

edit: Ok I changed some things and I have it working now. See code below. The only thing I am wondering is if I could have done it without using global variables.

Javascript

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        ausgabeLocation.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
  var lon = position.coords.longitude;
  var lat = position.coords.latitude;
  getWeather(lon, lat);
}

function getWeather(lon,lat){
        var jsonURL =  'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=metric&APPID=af0761262e54344b40ea5757a84f9e81';
        $.getJSON(jsonURL,function(json){
          var temp = json['main']['temp'];
          var iconID = json['weather'][0]['id'];
          var city = json['name'];
          writeStuff(temp,iconID,city);
          });
         function writeStuff(temp,iconID,city){
           window.tempFahr = Math.floor(temp*9/5+32);
           window.tempCels = Math.floor(temp*100/100);
           ausgabeLocation.innerHTML = city;
            ausgabeTemp.innerHTML = tempCels + "°C";
          $("#iconShow").html("<i class='owf owf-"+iconID+"'></i>");
         }

}

$(document).ready(function() {
  getLocation();
  var unitSwitch = false;
  $(document).on('click','#iconShow',function () {
                if(unitSwitch===true){
      ausgabeTemp.innerHTML = tempCels + '°C';
      unitSwitch = false;
    }else{
      ausgabeTemp.innerHTML = tempFahr + '°F';
      unitSwitch = true;
    }
            });
});

HTML

<body>
<h1 id="ausgabeLocation" class="text-center"></h1>
<div id="cont-center" class="box container-fluid box-shadow">


  <span id="iconShow" class="icon1" ></span>
  <div id="ausgabeTemp" class="swapUnit"></div>
</div>

</body>

Your problem is variable scope. You click delegate has no concept of tempCels or tempFahr because they are declared within the scope of getWeather — Insyte
– Insyte, Commented Aug 25, 2016 at 11:08
@IanBrindley Thank you for your feedback. How would I go about fixing this? How can I make these variables accesible for the click function? — user2317500
– user2317500, Commented Aug 25, 2016 at 16:14
@IanBrindley Hey thanks for your tip. I have it working now. See my edit in the original post. I just have one follow up question. Would this be possible without using global variables or is it ok to use global variables here? Thanks for your help. — user2317500
– user2317500, Commented Aug 25, 2016 at 18:58

Marcin Dargacz · Accepted Answer · 2016-08-25 11:18:39Z

1

Second problem is no correct closed tag . So this code

<div id="ausgabeTemp" class="swapUnit"></h2>

replace to

<div id="ausgabeTemp" class="swapUnit"></div>

answered Aug 25, 2016 at 11:18

Marcin Dargacz

1461 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oron Bendavid · Accepted Answer · 2016-08-25 11:36:55Z

0

You are getting the following error:

Mixed Content: The page requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=32.647371&lon=35.42155100000001&units=imperial&APPID=af0761262e54344b40ea5757a84f9e81'. This request has been blocked; the content must be served over HTTPS.

HTTPS is available only in Professional and Enterprise accounts. In Free account this feature is not available. Please, read more http://openweathermap.org/price

answered Aug 25, 2016 at 11:36

Oron Bendavid

1,5333 gold badges19 silver badges34 bronze badges

1 Comment

user2317500 Over a year ago

this is not my problem though. the api call works fine for me on firefox. i've had problems with chrome though. might be the same for you. thanks for looking at it anyway!

Collectives™ on Stack Overflow

Javascript Click Function doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related