Not able to execute a condition statement in javascript

Question

I want to display a background image in the background depending on the current weather condition.When I write the following lines in my javascript the code seems to fail:

if(ftemp>=0){
  document.body.style.backgroundImage =
    "url('https://images.pexels.com/photos/412462/pexels-photo-412462.jpeg?w=940&h=650&auto=compress&cs=tinysrgb')";
  }

I am getting the data(ftemp) from an API call and using the condition statement displaying the respective background image. I tried running just this

document.body.style.backgroundImage =
        "url('https://images.pexels.com/photos/412462/pexels-photo-412462.jpeg?w=940&h=650&auto=compress&cs=tinysrgb')";

and the code runs.I believe that there is some problem with the if statement. Here is the link to my work if it helps: https://codepen.io/ryoko1/pen/eRvxKb?editors=0110 Thanks.

Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. — Quentin, Jun 28 '17 at 12:31
Oh. This is **yet another** duplicate of https://stackoverflow.com/q/14220321/ (although you can't really tell without looking off stackoverflow to see enough of the code). — Quentin, Jun 28 '17 at 12:32
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jonas Wilms, Jun 28 '17 at 12:33
The if statement seems to be correct. Are you sure you have "ftemp" variable defined? Also, look at the browser console in developer tools (usually F12 or cmd+alt+I) , if you have any kind of error in your javascript, you'll find details there. — Ondra Koupil, Jun 28 '17 at 12:33

score 0 · Accepted Answer · answered Jun 28 '17 at 12:38

You are trying to use ftemp variable before getting the value from API. to solve this issue you can access ftemp variable inside getJSON.

Here is you working code: https://codepen.io/dineshu07/pen/ZyvpMP

$(document).ready(function() {
  var lat, long, ftemp, ctemp;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      lat = position.coords.latitude;
      long = position.coords.longitude;
      var url ="https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/ff2765ec67506dd69b7c42209bb40d7d/" +
        lat +
        "," +
        long;
      $.getJSON(url, function(data) {
        var type = data.timezone;
        ftemp = data.currently.temperature;
        var icon = data.currently.summary;
        $("#data").html(ftemp + " &#8457");
        $("#temp").html(type);
        $("#time").html(icon);
      
          if(ftemp>=0){            
          document.body.style.backgroundImage =          "url('https://images.pexels.com/photos/412462/pexels-photo-412462.jpeg?w=940&h=650&auto=compress&cs=tinysrgb')";
         }
      }).catch(function(error) {
        console.error(error);
      });
    });
  }
  $("#butt1").click(function() {
    ctemp = ftemp - 32;
    ctemp *= 0.5556;
    ctemp = Math.round(ctemp * 100) / 100;
    $("#data").html(ctemp + " &#8451");
  });
  $("#butt2").click(function() {
    ftemp = Math.round(ftemp * 100) / 100;
    $("#data").html(ftemp + " &#8457");
  });
 
});
$("button").show();

p{
  font-size:20px;
  text-align:center;
}
h1{
  text-align:center;
}

#dat{
  position:absolute;
    width:230px;
    height:250px;
    left:47%;
    top:47%;
    margin-left:-50px;
    margin-top:-50px;
  font-size:20px;
  background-color:black;
  border-style:solid;
  color:white;
}
#temp{
  text-align:center;
}
#time{
  text-align:center;
}
#data{
 text-align:center;
}
button{
  float:left;
  display:none;
  text-align:center;
  color:#FF4A4A;
  background-color:
}
#butt1{
  margin:5px;
}
#butt2{
  margin:5px;
}
body{
  background-size:cover;
  background-repeat:no repeat;
}

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

<h1><u>Weather App</u></h1>
<div id="dat">
  <p id="data">
  </p><br>
  <p id="temp">
  </p><br>
  <p id="time">
  </p>
  <button id="butt1">imperial
    </button>
  <button id="butt2">metric
    </button>
</div>

Although it was not me who downvoted, but your code is not working even if I put `ftemp = 5` right after `ftemp = data.currently.temperature` at least it my Firefox — Maxim Krabov, Jun 28 '17 at 12:46
It did not work because I have disabled geolocation. If turned on, your code works — Maxim Krabov, Jun 28 '17 at 12:51
Thanks for the reply.Why does this if condition work when i write it inside the getJSON.It should work outside the getJSON as well right,because ftemp has a value stored in it once getJSON is executed. — Rohan Akut, Jun 28 '17 at 12:59
@RohanAkut The problem is in fact that `ftemp` has NOT any value right after getJSON, because getJSON is asynchronous function, which means that it needs some time to have execution done. getJSON can be executing 0.5s, but you code after getJSON is executed in 0.0001 s. getJSON needs some time to get data from the server — Maxim Krabov, Jun 28 '17 at 14:00
@RohanAkut getJSON is asynchronous. so it will wait for that step to completed it will just execute next step.ftemp is undefined when the step is executed.you are trying to access ftemp before getting value. — Dinesh undefined, Jun 28 '17 at 14:21

score -1 · Answer 2 · answered Jun 28 '17 at 12:40

-1

Your ftemp is undefined. If you need to check a variable value, try this console.log(variable)

answered Jun 28 '17 at 12:40

Maxim Krabov

685
5
17

Not able to execute a condition statement in javascript

2 Answers2