CODEWITHSUNDEEP
javascriptjquery
user5795637
user5795637

Reputation:

Toggle temperature value Jquery

So I would like to toggle back and forth with a click on temperature, I have tried some ways back I get 'too much recursion' error. Works when I am switching to Kelvin, but can't figure out how to switch back to Celsius. Any help appreciated.

This is my html:

<p style="cursor: pointer">Temperature: <span id="temperature" class="toggle"></span></p>

And here's the javascript:

var tempKelvin = data.main.temp;
var tempCelsius = Math.round(((data.main.temp) - 273.15));

$("#temperature").html(tempCelsius + 'C');

$("#temperature").click(function(){
    $(".toggle").html(Math.round(tempKelvin) + 'K');
});

Upvotes: 0

Views: 1059

Answers (7)

Claude Ayitey
Claude Ayitey

Reputation: 21

Try this HTML

<a href="#" id="toggle">temp</a>

And this JS

        var temp = 25;
        var celsius = temp;
        var fahr = (1.8 * temp + 32);
        var switch_ = new Boolean(false);

        $("#toggle").on("click", function() {
            switch_ = !switch_;
            var temp = switch_ == true ? celsius + " °C" : fahr + " °F";
            $(this).text(temp);
        });

Upvotes: 0

Claude Ayitey
Claude Ayitey

Reputation: 21

I recently worked on a similar challenge, in the FreeCodeCamp curriculum. This was my solution.

        var temp = 25;
        var celsius = temp;
        var fahr = (1.8 * temp + 32);
        var switch_ = new Boolean(false);

        $("#toggle").on("click", function() {
            switch_ = !switch_;
            var temp = switch_ == true ? celsius + " °C" : fahr + " °F";
            $(this).text(temp);
        });

Upvotes: 1

Husen
Husen

Reputation: 1587

Use this it will solve your problem.

HTML :

<p style="cursor: pointer">
    Temperature: 
    <span id="tempKelvin" class="toggle"></span>
    <span id="tempCelsius" class="toggle" style="display:none"></span>
</p>

JS :

$(document).ready(function(){
     var tempKelvin = data.main.temp;
     var tempCelsius = Math.round((tempKelvin - 273.15));

     $("#tempKelvin").text(tempKelvin + 'K');
     $("#tempCelsius").text(tempCelsius + 'C');

     $("p").click(function(){
         $("span").toggle();
     }); 
});

Upvotes: -1

ADreNaLiNe-DJ
ADreNaLiNe-DJ

Reputation: 4919

You can do this like this:

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
	var tempKelvin = 10;
	var tempCelsius = Math.round(((tempKelvin) - 273.15));
	
	function toggleTemp(){
		var temp = $("#temperature").data("temp");
		if(temp == "celsius") {
			$("#temperature").text(tempKelvin + "K");
			$("#temperature").data("temp", "kelvin");
		} else {
			$("#temperature").text(tempCelsius + "C");
			$("#temperature").data("temp", "celsius");
		}
	}
	
	$(document).ready(function(){
		toggleTemp();
		
		$("#temperature").click(function(){
			toggleTemp();
		});
	});
</script>

<p style="cursor: pointer">Temperature: <span id="temperature" class="toggle" data-temp="kelvin"></span></p>

Upvotes: 0

GillesC
GillesC

Reputation: 10874

You could simply have another variable to track which temperature is displayed.

See example below as per this jsfiddle

var data = {main: {temp: 500}};
var tempKelvin = data.main.temp;
var tempCelsius = Math.round(((data.main.temp) - 273.15));
var celcius = true;

$("#temperature").html(tempCelsius + 'C');

$("#temperature").click(function(){
    if (celcius) {
        $(".toggle").html(Math.round(tempKelvin) + 'K');
    } else {
      $("#temperature").html(tempCelsius + 'C');
    }
    celcius = !celcius;
});

Upvotes: 1

rjmunro
rjmunro

Reputation: 28056

I'd keep whether to show Kelvin or Celcius in a variable, something like:

var temp = 290;
var tempKelvin = temp;
var tempCelsius = Math.round(((temp) - 273.15));

$("#temperature").html(tempCelsius + 'C');

var showKelvin = false;

$("#temperature").click(function(){
  showKelvin = !showKelvin;
  if (showKelvin) {
    $("#temperature").html(Math.round(tempKelvin) + 'K');
  } else {
    $("#temperature").html(tempCelsius + 'C');
  }
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="cursor: pointer">Temperature: <span id="temperature" ></span></p>

You don't need the toggle class - you can just use the temprature id in all cases.

Upvotes: 1

amrit sandhu
amrit sandhu

Reputation: 130

try this.....

var tempKelvin = data.main.temp;
var tempCelsius = Math.round(((data.main.temp) - 273.15));

$("#temperature").html(tempCelsius + 'C');

$("#temperature").click(function(){
if ($(".toggle").html().indexOf('K')==-1)
{
    $(".toggle").html(Math.round(tempKelvin) + 'K');
}

else
{
$("#temperature").html(tempCelsius + 'C');
}
});

Upvotes: 1

Related Questions