Local function variable change not effecting variable in global scope. Why not?

Question

I'm creating a simple weather application in js/jquery. One component of the simpleweather function is that it should globally effect the var fahrenheit, yet when I call it later in the if/else statement it logs in the var fahrenheit logs as 0. What am I doing wrong?

var fahrenheit = 0; var celsius = 0; $(document).ready(function() { $.simpleWeather({ location: 'newyork, NY', woeid: '', unit: 'f', success: function(weather) { //renames weather.temp as fahrenheit fahrenheit = weather.temp; console.log(fahrenheit); //puts that value into .fahrenheit div $(".fahrenheit").html(fahrenheit); //converts to celsius then puts in .celsius div celsius = fahrenheit - 32; var celsius = celsius * 5; var celsius = celsius / 9; var celsius = parseInt(celsius); $(".celsius").html(celsius); }, }); }); if (fahrenheit > 55) { $(".scarf").html('<img src="img/scarf.svg"></img>'); } else { $(".scarf").html(""); };

Why are you redeclaring the variable celsius in the onready eventhandler? — mcserep
– mcserep, Commented Apr 20, 2015 at 0:37
Your success handler is nested inside of two asynchronous operations $(document).ready() and $.simpleWeather(). That means those operations will complete some time LATER. Meanwhile, your if (fahrenheit > 55) code will have run BEFORE those async operations have completed. Put all code that needs to results INSIDE the success handler function itself. — jfriend00
– jfriend00, Commented Apr 20, 2015 at 0:40
@cmate I was basing my syntax off of a variable exercise. My understanding was that this was the correct syntax for changing a variable using the same variable. — sjos
– sjos, Commented Apr 20, 2015 at 0:53
@jfriend00. Thank you. This was the key. I was console logging "test" throughout the document and this function was running later than the others, but I could not figure out why. I removed the $(document).ready() hander but had not realized $.simpleWeather would run later as well. Thanks! — sjos
– sjos, Commented Apr 20, 2015 at 0:56
@sjos - if something takes a callback that is called when the operation is complete, then it is probably an async operation that is called sometime later. — jfriend00
– jfriend00, Commented Apr 20, 2015 at 1:02

xdazz · Accepted Answer · 2015-04-20 00:37:28Z

1

You should put the below code inside the success callback. (Ajax works asynchronous.)

if (fahrenheit > 55) { $(".scarf").html('<img src="img/scarf.svg"></img>'); } else { $(".scarf").html(""); };

answered Apr 20, 2015 at 0:37

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

1 Comment

sjos Over a year ago

thanks @xdazz. I didn't realize the functions were running asynchronously. This solution worked for me!

Collectives™ on Stack Overflow

Local function variable change not effecting variable in global scope. Why not?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related