CODEWITHSUNDEEP
javascriptjquery
user5780883
user5780883

Reputation:

variable updating in console.log but not in another function

Cant figure out what I'm doing wrong here.

Im using jquery to update a variable on screen resize. The purpose of the variable is to fix an overshoot on a scrollTop function when the CSS hits the media query 768px.

Here is the code I have for the resize function:

$(window).resize(function(){
  if (window.matchMedia('(max-width: 768px)').matches) {
    var scrollovershoot = 40;console.log(scrollovershoot);
  } else {
   var scrollovershoot = 0;console.log(scrollovershoot);
  }
});

Now the function above works exactly as it should in the sense that it logs the correct scrollovershoot variable when the screen size hits 768 or below ie a value of 40. The variable doesn't seem to update in my other scrollTop function though (it doesn't update the scrollTop offset). Here is the code for the scrolling function:

$(".fixed-navigation-follow li a, .see-next a, .more-info-cta, .flipper-container a, #main-atf-cta").click(function (){
    var scrollmeto = $(this).attr("href");
 $('html, body').animate({
       scrollTop: $(scrollmeto).offset().top - scrollovershoot
 }, 1000);
    return false;
});

When I resize the screen I get the automatic console logging from my first function displaying the correct value however when I stop resizing and just type console.log(scrollovershoot); in the console I get the scrollovershoot is not defined message. Why is this?

Upvotes: 1

Views: 588

Answers (1)

Aᴍɪʀ
Aᴍɪʀ

Reputation: 7803

scrollovershoot needs to be a global variable. You are defining it at function level.

Remove the keyword var when you are changing it to prevent it to be defined at your function scope, and define it above your snippet to make it global.

Or to be safer, you can make it global by assigning it to window which is a global object.

window.scrollovershoot = 0;
$(window).resize(function(){
    if (window.matchMedia('(max-width: 768px)').matches) {
      window.scrollovershoot = 40;console.log(window.scrollovershoot);
    } else {
      window.scrollovershoot = 0;console.log(window.scrollovershoot);
    }
});

And in your jQuery:

$(".fixed-navigation-follow li a, .see-next a, .more-info-cta, .flipper-container a, #main-atf-cta").click(function (){
    var scrollmeto = $(this).attr("href");
 $('html, body').animate({
       scrollTop: $(scrollmeto).offset().top - window.scrollovershoot
 }, 1000);
    return false;
});

When you are using var, you are defining a variable at your function's scope. Defining it before your function, makes it global which could be accessed by other functions.

// In the browser, `window` is a global object referring to the browser object module.
// More info: http://www.w3schools.com/js/js_window.asp.

var myGlobalVar;
function f() {
    myGlobalVar = 'something';
    window.myVar = 'something else';
    var myLocalVar = 'some other things';
}
function g() {
    console.log(myGlobalVar); // this works
    console.log(window.myVar); // this also works
    console.log(myLocalVar); // this does NOT work
}

f();
g();

Upvotes: 3

Related Questions