my javascript checkbox doesn't do anything

Question

http://codepen.io/PaxBlueRibbon/pen/wWJWXj

I'm trying to teach myself Javascript, but this fahrenheit/celsius switch doesn't do anything. I set up my switch like this:

$(document).ready(function getPosition() {
  if (document.getElementById('myonoffswitch').checked) {
    var unit = "Fahrenheit";
  } else {
    var unit = "Celsius";
  }

and set conditionals in the JS like this

      var tempKelvin = json.main.temp;
      var tempFahrenheit = tempKelvin * 1.8 - 459.67;
      var tempCelsius = tempKelvin - 273.15;
      if (unit == "Fahrenheit") {
        $(".temp").html(Math.round(tempFahrenheit) + " Degrees " + unit);
      }
      if (unit == "Celsius") {
$(".temp").html(Math.round(tempCelsius) + " Degrees " + unit);
      }

The fahrenheit works, and if I change the variable to something else it stops working, but I can't get it to show Celsius.

You are only setting the value of unit once. You will need to change it when your myonoffswitch is changed. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jul 11, 2016 at 21:11
is your switch a checkbox or radio button? I think you might need to check the status of your switch dynamically by using an event handler. — user6332430
– user6332430, Commented Jul 11, 2016 at 21:11
codepen.io/anon/pen/OXOVGa if you look at the console, you will note that the unit is being updated, however not being detected in the json function. I put a log in the json function to show the current unit and it always seemed to show Fahrenheit, regardless of change??? — Rachel Gallen
– Rachel Gallen, Commented Jul 11, 2016 at 22:47

exabyssus · Accepted Answer · 2016-07-11 21:15:22Z

1

Since you are using jQuery.

// you should add event listener.
$('#myonoffswitch').change(function(){
    // and change "unit" every time checkbox is changed
    unit = $(this).prop('checked') ? 'Fahrenheit' : 'Celsius';
    // change html here
});

And you can call this event on page load

$('#myonoffswitch').change();

answered Jul 11, 2016 at 21:15

exabyssus

4412 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paxana Non Grata Over a year ago

i'm trying to figure out where in my code to place these so they run at the proper time

exabyssus Over a year ago

I would suggest you to rearrange your code a bit. First define your global variables, like var unit, location; etc at the top and change each of them accordingly ( eq. checkbox changed, JSON loaded, etc.). Divide each action into separate functions. (eq. getLocation(), drawHTML(), etc). Call them whenever they are needed (eq. Page Loaded, checkbox changed, time intervar, etc) and let them use global variables defined earlier.

jordaniac89 Over a year ago

$(document).ready() specifies that everything inside it will be executed when the page loads. Always put event bindings inside it to assure that you are binding to an element that has been created.

Collectives™ on Stack Overflow

my javascript checkbox doesn't do anything

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest