CODEWITHSUNDEEP
javascriptjquerybuttonclick
user2317500
user2317500

Reputation: 99

Javascript Click Function doesn't work

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>

Upvotes: 0

Views: 100

Answers (2)

Oron Bendavid
Oron Bendavid

Reputation: 1533

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

Upvotes: 0

Marcin Dargacz
Marcin Dargacz

Reputation: 146

Second problem is no correct closed tag . So this code

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

replace to

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

Upvotes: 1

Related Questions