Fahrenheit to Celsius toggle button

Question

For a challenge, I need to create a button to toggle between Fahrenheit and Celsius which I did. The issue is that it works to Fahrenheit and back to Celsius and then it stops. I want the user to toggle back and forth as much as they want and I cannot find a solution??

$("document").ready(function() {

    // Declaring global variables

    var latitude, longitude;

    // Getting the location to be shared in the weather API / Display on Page

    function getCurrentLocation() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                latitude = position.coords.latitude;
                longitude = position.coords.longitude;

                // Getting exact location by passing Lat Long to Google Maps API

               $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&key=AIzaSyBBP3PtbN3vugWmPEia1aYeKNLP8_-VDck", function(json) {
                    console.log(JSON.stringify(json, null, 2));

                    $("#currentLocation").html(json.results[2].formatted_address);

                    // Getting exact Weather conditions by passing the Lat/Long to freeCodeCamp Weather API

                $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(weatherJSON) {
                    $("#currentWeather").html(weatherJSON.weather[0].main + ", " + weatherJSON.weather[0].description);
                    $("#weatherIcon").attr("src", weatherJSON.weather[0].icon);
                    $("#currentTemp").html(weatherJSON.main.temp + " C°");

                    console.log(JSON.stringify(weatherJSON, null, 2));

                    // Converting Celsius to Farenheit

                    $(".btn").on("click", function setToF() {
                        var fahrenheit = (weatherJSON.main.temp * 9/5) + 32;
                        $("#currentTemp").html(fahrenheit + " F°");
                        $(".btn").html("Celsius");

                        if(weatherJSON.main.temp !== fahrenheit) {
                            $(".btn").on("click", function() {
                                $("#currentTemp").html(weatherJSON.main.temp + " C°");
                                $(".btn").html("Fahrenheit");
                            })
                        }
                    });
                 });
               });
            });
        };
    }
    getCurrentLocation();
});

https://codepen.io/HacNass/full/ZrVOdX/

Thanks for your help in advance!

Answer 1

Get your .BTN click handler out of there. Wrap it in a function and pass weatherJSON.main.temp as a parameter if it exist and is not undefined. Then it'll work properly.

Answer 2

You can save the current temperature unit and refer to it everytime you have to decide to convert from one unit to the other.

weatherJSON.main.tempUnit = "C";

https://codepen.io/anon/pen/paqNEq/

Answer 3

Just use $('#currentTemp').html() to get setted value (temperature).

$("document").ready(function() {

    // Declaring global variables

    var latitude, longitude;

    // Getting the location to be shared in the weather API / Display on Page

    function getCurrentLocation() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                latitude = position.coords.latitude;
                longitude = position.coords.longitude;

                // Getting exact location by passing Lat Long to Google Maps API

               $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&key=AIzaSyBBP3PtbN3vugWmPEia1aYeKNLP8_-VDck", function(json) {
                    console.log(JSON.stringify(json, null, 2));

                    $("#currentLocation").html(json.results[2].formatted_address);

                    // Getting exact Weather conditions by passing the Lat/Long to freeCodeCamp Weather API

                $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(weatherJSON) {
                    $("#currentWeather").html(weatherJSON.weather[0].main + ", " + weatherJSON.weather[0].description);
                    $("#weatherIcon").attr("src", weatherJSON.weather[0].icon);
                    $("#currentTemp").html(weatherJSON.main.temp + " C°");

                    console.log(JSON.stringify(weatherJSON, null, 2));




                 });
               });
            });
        };
    }
    getCurrentLocation();

    // Converting Celsius to Farenheit
    $(".btn").on("click", function() {
        var $temp = $("#currentTemp");
        var $tempVal = $temp.html().replace(' F°','');
        var $tempVal = $tempVal.replace(' C°','');
        var $tempVal = parseInt($tempVal);
        if($temp.data('temp') != 'F'){
            var fahrenheit = ($tempVal * 9/5) + 32;
            $temp.html(fahrenheit + " F°").data('temp', 'F');
            $(".btn").html("Celsius");
        }else{
            var celcius = ($tempVal-32) * 5/9;
            $temp.html(celcius + " C°").data('temp', 'C');
            $(".btn").html("Fahrenheit");
        }
    });

});