CODEWITHSUNDEEP
javascriptjqueryjson
Fenici
Fenici

Reputation: 461

Click and swap data using a javascript callback handler

var tempreture = document.getElementById("temp")

var requestWeather = new XMLHttpRequest();



    requestWeather.open('GET', 'https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
    requestWeather.onload = function () {
        var weatherData = JSON.parse(requestWeather.responseText);
        console.log(weatherData);
        getTemp(weatherData);
    };    requestWeather.send();

    function getTemp(data) {
        var tempString = "";
        var temp = data.main.temp;
        tempString += "<p class='weather'>" + temp + '&#x2103;' + "</p>";
        tempreture.innerHTML = tempString;

        tempreture.addEventListener("click", function( ) {
        var ftemp = "<p class='weather'>" + changeTemp(temp) + '° F' + "</p>";
        tempreture.innerHTML = ftemp;
        },false);
    }


    function changeTemp(temp){
        var tp = temp * 1.8 + 32;
        var cel =Math.round(tp);

        return cel;
    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a  id="temp" onclick="getTemp()"></a>

How do I use the click callback handler to swap text from a different string

I want to switch between Fahrenheit and Celsius when a user clicks an element.

This is what I have done so far:

   function getTemp(data) {
    var tempString = "";
    var temp = data.main.temp;
    tempreture.addEventListener("click", function( ) {

        tempString += "<p class='weather'>" + temp + '&#x2103;' + "</p>";
    },false)
    tempString += "<p class='weather'>" + changeTemp(temp) + '° F' + "</p>";


    tempreture.insertAdjacentHTML("beforeend", tempString);

}


function changeTemp(temp){
    var tp = (temp - 32) * 5/9;
    var cel =Math.round(tp);

    return cel;
};

I have only tried this using pure javascript. It would be great if someone can give me a hint as to what I'm doing incorrectly. 

var temp = data.main.temp;

The temp is where I got the data from and is passed down to the HTML. I have done the conversion, but I don't know how to pass it back from the conversion function.

ADD the temperature data are come from 

  var requestWeather = new XMLHttpRequest();


    requestWeather.open('GET', 'https://fcc-weather-api.glitch.me/api/current?lat=' + data.lat + '&lon=' + data.lon);


        requestWeather.onload = function () {
            var weatherData = JSON.parse(requestWeather.responseText);
            console.log(weatherData);
            getTemp(weatherData);
    }

Edit I had tried the click function, now. however, I found same issues with the return back to old value after the click.

Upvotes: 1

Views: 137

Answers (1)

Lucky Soni
Lucky Soni

Reputation: 6888

I recommend that you validate the data that the API returns.

var tempreture = document.getElementById("temp")

var requestWeather = new XMLHttpRequest();

// global cache
var currentTemp, 
    currentUnit;


requestWeather.open('GET', 'https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
requestWeather.onload = function() {
    var weatherData = JSON.parse(requestWeather.responseText);
    console.log(weatherData);
    getTemp(weatherData);
};
requestWeather.send();

function getTemp(data) {
    currentTemp = typeof data === 'object' ? data.main.temp : null; // save new value in global cache

    currentUnit = 'celcius';

    tempreture.innerHTML = currentTemp + '&#x2103;';
}

tempreture.addEventListener("click", function() {
    tempreture.innerHTML = changeTemp();
}, false);


function changeTemp() {
    if(currentUnit === 'celcius') {
        var tp = currentTemp * 1.8 + 32;
        var fh = Math.round(tp);

        currentUnit = 'fahrenheit';

        return fh + '° F';
    } else {
        currentUnit = 'celcius';
        return currentTemp + '&#x2103;';
    }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="temp" class='weather'></span>

Upvotes: 3

Related Questions