CODEWITHSUNDEEP
javascriptjqueryhtmlif-statement
Alina Khachatrian
Alina Khachatrian

Reputation: 757

How can I check which radio button is selected and apply an appropriate behaviour with if else statements in jQuery

Here is my codepen:

http://codepen.io/ekilja01/full/KaMXjp/

I'm trying do detect which radio button is selected and then display appropriate output whether Celsius or Fahrenheit as the final output.

Here is my HTML:

<body>
  <div class="container-fluid">
    <i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i>
    <br><br><br>
     
      <form>
        <input type="radio" name="celsiusOrFahrenheit" value="f" id="fahrenheit"> Fahrenheit &deg;F;<br>
           <input type="radio" name="celsiusOrFahrenheit" value="c" id ="celsius" > Celsius &deg;C<br>
      </form>
         <div class="yourlocation">
           <h1>Your location is: </h1>
             <p class="yourLocationGoesHere">
             </p>
         </div>

       <h1>Your current weather is: </h1>

         <div class="showTemperature">
            <p class="showDegree"></p>
         </div>

         <div class="icon">
         </div>

    </div>
</body>

Here is my jQuery:

$(document).ready(function(){
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=7f5806c8f3fd28b03e2d6580a50732d6", function (data){

  var len = data.length;
  var location = "";
  var temperature = "";
  var celsius = Math.floor(data.main.temp - 273.15);
  var fahrenheit = Math.floor(9/5 * (data.main.temp - 273) + 32);


  function checkSelection(){   if(document.getElementById('celsius').checked) {
  //Celsius radio button is checked
  return celsius;
   }else if(document.getElementById('fahrenheit').checked) {
     //Fahrenheit radio button is checked
     return fahrenheit;
   } else {
      return "Please select Fahrenheit or Celsius"
   }
                         };


   location += "<p>'" + data.name + ", " + data.sys.country + "'</p>";

   temperature += "<p>'" + checkSelection() + "'</p>";
   $(".yourLocationGoesHere").html(location);

   $(".showDegree").html(temperature);


    });
    });

Please help.

Upvotes: 3

Views: 114

Answers (4)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48337

You need to attach a change event handler when your radio buttons are changed.

Further more, you have to declare celsius and fahrenheit variables outside in order to access them in change method.

$(document).ready(function(){
  var celsius="";
  var fahrenheit="";
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=7f5806c8f3fd28b03e2d6580a50732d6", function (data){   
     var len = data.length;
     var location = "";
     celsius = Math.floor(data.main.temp - 273.15);
     fahrenheit = Math.floor(9/5 * (data.main.temp - 273) + 32);
   location += "<p>'" + data.name + ", " + data.sys.country + "'</p>";
    $(".yourLocationGoesHere").html(location);        
  });
  $('input[type="radio"]').change(function(){
  temperature = "";
  if(document.getElementById('celsius').checked) {
        temperature += "<p>'" + celsius+ "'</p>";  
        $(".showDegree").html(temperature);
         
    }else if(document.getElementById('fahrenheit').checked) {
      temperature += "<p>'" + fahrenheit+ "'</p>";  
        $(".showDegree").html(temperature);
    } else {
      return "Please select Fahrenheit or Celsius"
    }
});
});
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

body {
  max-width: 42em;
  padding: 2em;
  margin: 5px auto;
  color: #161616;
  font-family: 'Press Start 2P', cursive;
  text-align: center;
  background-color: currentColor;
}

h1 {
  line-height: 45px;
  color: #fff;
  font-weight: lighter;
  font-size: 1em;
  font-family: 'Press Start 2P', cursive;
  text-align: center;
  text-transform: uppercase;
}

p {
  color: #fff;
}

form {
  color: #fff;
  text-align:center !important;
}

i {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/43f8201759.js">
</script>

<body>
  <div class="container-fluid">
  <i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i>
<br><br><br>
  <form>
  <input type="radio" name="celsiusOrFahrenheit" value="f" id="fahrenheit"> Fahrenheit &deg;F;<br>
  <input type="radio" name="celsiusOrFahrenheit" value="c" id ="celsius"> Celsius &deg;C<br>
</form>
<div class="yourlocation">
  <h1>Your location is: </h1>
  <p class="yourLocationGoesHere">
  </p>
</div>

<h1>Your current weather is: </h1>

<div class="showTemperature">
  <p class="showDegree"></p>
</div>
    
    <div class="icon">
      </div>

  </div>
</body>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

you need to listen to change event of radios and do whatever it is you want within conditional of the event handler

$(':radio').change(function(){ 
   // "this" will be the checked radio element       
   if (this.id === 'celsius'){
     // code you want for celsius
   }else{
     // code you want for fahrenheit
   }
});

Upvotes: 2

Serhat MERCAN
Serhat MERCAN

Reputation: 1098

$(document).ready(function(){
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=7f5806c8f3fd28b03e2d6580a50732d6", function (data){

  var len = data.length;
  var location = "";
  var temperature = "";
  var celsius = Math.floor(data.main.temp - 273.15);
  var fahrenheit = Math.floor(9/5 * (data.main.temp - 273) + 32);


  function checkSelection(){   if(document.getElementById('celsius').checked) {
  //Celsius radio button is checked
  return celsius;
   }else if(document.getElementById('fahrenheit').checked) {
     //Fahrenheit radio button is checked
     return fahrenheit;
   } else {
      return "Please select Fahrenheit or Celsius"
   }
                         };

    
function update(){
   

   var loc = "<p>'" + data.name + ", " + data.sys.country + "'</p>";
   temperature += "<p>'" + checkSelection() + "'</p>";
   $(".yourLocationGoesHere").html(loc);

   $(".showDegree").html(temperature);
}
    
    update();
    
    $('input[type=radio][name="celsiusOrFahrenheit"]').on('change', update);

    
   
    });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid">
    <i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i>

      <form>
        <input type="radio" name="celsiusOrFahrenheit" value="f" id="fahrenheit"> Fahrenheit &deg;F;<br>
        <input type="radio" name="celsiusOrFahrenheit" value="c" id ="celsius" > Celsius &deg;C<br>
      </form>
         <div class="yourlocation">
           <h1>Your location is: </h1>
             <p class="yourLocationGoesHere">
             </p>
         </div>

       <h1>Your current weather is: </h1>

         <div class="showTemperature">
            <p class="showDegree"></p>
         </div>

         <div class="icon">
         </div>

    </div>

Upvotes: 0

Kostas Bastas
Kostas Bastas

Reputation: 11

add == true and you are ready

document.getElementById('celsius').checked==true

Upvotes: -2

Related Questions