TylerMayfield TylerMayfield - 3 months ago 9
jQuery Question

jQuery button requiring two clicks for functionality

I'm really new to working with jQuery and JSON, but I'm doing a simple weather retrieving practice project. I have got it to work except that I have to hit the Get Weather button twice in order for the Fahrenheit/Celsius button to work. I'm sure it is something small that I'm missing.

Here is all the code:

<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function gettingJSON(data){


var temp = data.main.temp;
var tempC = (temp - 32) * .5556;

var far = $(".temp").html("The temperature is " + Math.floor(temp) + "F");

var cel = $(".tempC").html("The temperature in C is " + Math.floor(tempC));

cel.hide();
far.show();
$(document).on("click", "#change", function(){
far.toggle();
cel.toggle();
});

}

$(document).ready(function(){

$(document).on("click", "#getIt", function(){

var location = $(".loc").val();
var state = $(".state").val();
var apiKey = "a6253b99c39a496597483fbf2ff308ff";
var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey;
$.getJSON(url, gettingJSON);

});

});



</script>

<style>
body,html{
width: 100%;
height: 100%;
background: honeydew;
}
.temp, .tempC{
font-size: 30px;
}
</style>
</head>
<body>
<div class="toggleMe">
<p class="temp"></p>
<p class="tempC"></p>
</div>
<input type="text" class="loc" placeholder="City">
<input type="text" class="state" placeholder="State">
<button id ="getIt"> Get Weather</button>
<button id="change">C/F</button>

</body>
</html>


I'd appreciate any help available!

Thanks!

Answer

You should move the $(document).on("click", "#change", out of the gettingJSON function, otherwise - every time you call the gettingJSON function - you attache a new event listener for the click event on the #change element.

Here is your updated code:

var far = $(".temp");
var cel = $(".tempC")

function gettingJSON(data){
  var temp = data.main.temp;
  var tempC = (temp - 32) * .5556;
  
  far.html("The temperature is " + Math.floor(temp) + "F");

  cel.html("The temperature in C is " + Math.floor(tempC));

  cel.hide();
  far.show();
  
}

$(document).ready(function(){

  $(document).on("click", "#change", function(){
    far.toggle();
    cel.toggle();
  });
  $(document).on("click", "#getIt", function(){
    var location = $(".loc").val();
    var state = $(".state").val();
    var apiKey = "a6253b99c39a496597483fbf2ff308ff";
    var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey;
    $.getJSON(url, gettingJSON);
    
  });
});
body,html{
  width: 100%;
  height: 100%;
  background: honeydew;
}
.temp, .tempC{
  font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="toggleMe">
    <p class="temp"></p>
    <p class="tempC"></p>
</div>
<input type="text" class="loc" placeholder="City">
<input type="text" class="state" placeholder="State">
<button id ="getIt"> Get Weather</button>
<button id="change">C/F</button>