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>

Answer 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>

Answer 2

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

Javascript Click Function doesn't work

Question

2 answers

solution1
1 2016-08-25 11:18:39

solution2
0 2016-08-25 11:36:55

Javascript Click Function doesn't work

Question

2 answers

solution1 1 2016-08-25 11:18:39

solution2 0 2016-08-25 11:36:55

solution1
1 2016-08-25 11:18:39

solution2
0 2016-08-25 11:36:55