-1

I have just gave up, tried to find a solution for entire day. Help me understand this thing. Why global variable is not updating?

I have this code, it's checking if the tab is active and then I want to update the variable based on which tab has been chosen. So the tab switching works fine, the console.log inside the activate gives 24, outside undefined.

var last;
jQuery('#tabs').tabs({
  active: 0,
  activate: function(event, ui) {
    if (ui.newPanel.is("#tabs-1")) {
      var last = 24;
      console.log(last)
    } else if (ui.newPanel.is("#tabs-2")) {
      var last = 48;
    } else if (ui.newPanel.is("#tabs-3")) {
      var last = 72;
    };

  }
});

console.log(last);

What do I miss here?

Mamdouh Saeed
  • 2,302
  • 1
  • 9
  • 11
TomTom
  • 37
  • 2
  • 8
  • Aside from `last` being local to the `activate` function, think about when which function is executed. The `console.log(last)` call at the end of the example is executed at the same time when `jQuery('#tabs').tabs(...)` is executed, i.e. *once* at page load. The `activate` function is called *later*, *after page load*, whenever a tab is clicked. – Felix Kling Nov 08 '16 at 03:08

2 Answers2

1

Declaring a var is function scoped. See What is the scope of variables in JavaScript?

You have a var last declared at the top of your page which is global scoped.

You declare a new variable var last = 24 within the activate function. This is a different scope since it is within a function and so it will become a local variable to this activate function. The subsequent var last declarations are ignored since one already exists in the function scope, but the values will be assigned to the local function var last.

Your console.log(last) is scoped to the global last which you never give a value.

If you want to use the global last, then remove the declaration from within your function. The compiler will then not find a local var last in the function and will venture to the outer scope where it will find your global last, which it will use.

var last; // global scope
jQuery('#tabs').tabs({
  active: 0,
  activate: function (event, ui) {
    if (ui.newPanel.is("#tabs-1")) {
      last = 24; // remove var declaration to use global variable
      console.log(last); 
    }

    else if (ui.newPanel.is("#tabs-2")) {
      last = 48;
    }

    else if (ui.newPanel.is("#tabs-3")) {
      last = 72;
    };

  }
});

console.log(last); // global scope last

var last = -1; // global scope
var whereAmI = "GLOBAL SCOPE";

$('button').on('click',function() {  // new scope within function
    if (new Date().getMilliseconds() % 2 === 0) {
      var whereAmI = "FUNCTION SCOPE";
      var last = 24;
      console.log(last);
      console.log(whereAmI); 
    } else {
      last = 48;
      whereAmI = "FUNCTION SCOPE";
      console.log(last);
      console.log(whereAmI);
    }
});

console.log(last); // global scope
console.log(whereAmI); // global scope
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me!</button>
Community
  • 1
  • 1
Jecoms
  • 2,558
  • 4
  • 20
  • 31
0

Using var in the activate handler makes it a local variable thus it is not updating the outer scope variable

var last;
jQuery('#tabs').tabs({
  active: 0,
  activate: function(event, ui) {
    if (ui.newPanel.is("#tabs-1")) {
      last = 24;
      console.log(last)
    } else if (ui.newPanel.is("#tabs-2")) {
      last = 48;
    } else if (ui.newPanel.is("#tabs-3")) {
      last = 72;
    };

  }
});

$('button').click(function() {
  $('#inputlast').val(last);
})
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
      Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna
      ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum.
      Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

<br />
<input id="inputlast" readonly />
<button>Value</button>
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531