How do I set a new variable value inside a javascript function?

Question

I have 2 navigation buttons, 'a' and 'b', where 'a' links to page 'A' and 'b' links to page 'B'. When the page loads, page 'A' is visible by default and page 'B' is hidden by default. When link 'b' is clicked, page 'A' is faded out to opacity 0 and reduced in height via the jQuery 'toggle' method, while page 'B' is faded in to opacity 1 and increased in height to full size via the jQuery 'toggle' method. When link 'a' is clicked again, the opposite happens where page 'b' is once again hidden from view and page 'a' brought back to view using the same methods.

What I'm having trouble with is when the link to the current page being displayed is clicked again, the current page just goes blank; if page 'A' is already loaded, and I click on link 'a', the whole page goes blank, which I don't want. What I have tried is the following:

var i = "a";

function a() {
  if (i != "a") {
    var i = "a";    
    jQuery(animation to hide page 'A');
    jQuery(animation to make visible page 'B');
  }
}

function b() {
  if (i != "b") {
    var i = "b";
    jQuery(animation to hide page 'B');
    jQuery(animation to make visible page 'B');
  }
}

I have figured out that the value for variable 'i' that I set inside a function is only effective inside the function and that outside the function, the variable's value remains as 'a' and hence link 'a' is never clickable while link 'b' is always clickable and also results in a blank page.

How can I write the correct javascript to do what I want it to do?

Jacob Relkin · Accepted Answer · 2011-01-01 03:21:14Z

5

Drop the var keyword inside both functions and it will modify the global i variable.

Your code is actually very misleading because you're assigning i to a function, you might want to just change it to use strings, like so:

var i = "a";

function a() {
  if (i != "a") {
    i = "a";    
    jQuery(animation to hide page 'A');
    jQuery(animation to make visible page 'B');
  }
}

function b() {
  if (i != "b") {
    i = "b";
    jQuery(animation to hide page 'B');
    jQuery(animation to make visible page 'B');
  }
}

edited Jan 1, 2011 at 3:21

answered Jan 1, 2011 at 3:16

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

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

Comments

Chandu · Accepted Answer · 2011-01-01 03:17:17Z

5

You are defining a new variable i again in the function because you are using var before i. Change them to as follows:

var i = a;

function a() {
  if (i != a) {
    i = a;    
    jQuery(animation to hide page 'A');
    jQuery(animation to make visible page 'B');
  }
}

function b() {
  if (i != b) {
    i = b;
    jQuery(animation to hide page 'B');
    jQuery(animation to make visible page 'B');
  }
}

answered Jan 1, 2011 at 3:17

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Collectives™ on Stack Overflow

How do I set a new variable value inside a javascript function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related