CODEWITHSUNDEEP
javascript
Kulerbox
Kulerbox

Reputation: 200

Changing a global var

Im trying to change a var value everytime I click a button. But for some reason the var value keeps changing back to 0. Not sure if this is a scope issue?

Trying to update global var curPos to the reqPos value on each click

Please see code below

var reqPos = 0,
    curPos = 0;


function viewRotate(curPos, reqPos){

  var curPos = reqPos;
  console.log('1 ' + reqPos + curPos);

  if(curPos === 0 && reqPos === 12) {

    for(var j = 0; j < reqPos; j++){
      curPos++;
    }
    curPos = reqPos;
  }
  else if (curPos === 0 && reqPos === 24) {

    for(var j = 0; j < reqPos; j++){
      curPos++;
    }
    curPos = reqPos;
  }
  else if (curPos === 0 && reqPos === 36) {
    for(var j = 0; j < reqPos; j++){
      curPos++;
    }
    curPos = reqPos;
  }
}

e('.btn-front').click(function(){
    viewRotate(curPos, 0);
    console.log(reqPos);
});

e('.btn-right').click(function(){
    viewRotate(curPos, 12);
    console.log(reqPos);
});

e('.btn-back').click(function(){
    viewRotate(curPos, 24);
    console.log(reqPos);
});

e('.btn-left').click(function(){
    viewRotate(curPos, 36);
    console.log(reqPos);
});

Upvotes: 0

Views: 93

Answers (4)

Mac
Mac

Reputation: 1566

The variable curPos, defined outside of your function, is not the same variable as curPos, defined inside your function, even though they have the same name.

JavaScript separates your global variable curPos (outside the function) from your local variable curPos (inside your function). Having the same name will not make them the same variable.

To access your global curPos from inside your function, remove the "var" keyword, as @sdgluck suggests. Otherwise you end up creating a brand new local variable inside your function that just happens to have the same name as one of your global variables.

But having said that, if all you need to do is

update global var curPos to the reqPos value on each click

then couldn't you use some simpler code? Such as...

var curPos = 0;

function viewRotate( _reqPos ) {
    curPos = _reqPos;
}

e('.btn-front').click(function(){
    viewRotate( 0 );
});

e('.btn-right').click(function(){
    viewRotate( 12 );
});

e('.btn-back').click(function(){
    viewRotate( 24 );
});

e('.btn-left').click(function(){
    viewRotate( 36 );
});

Upvotes: 0

user1438038
user1438038

Reputation: 6059

You redefined the curPos variable within the viewRotate() function, which will overshadow the global curPos variable in local scope:

var reqPos = 0,
    curPos = 0; // <- Defining variable here


function viewRotate(curPos, reqPos){

  var curPos = reqPos; // <- Redefining it here

  ...

You should rename or remove the local curPos variable from your viewRotate() function altogether.

Upvotes: 0

freakish
freakish

Reputation: 56467

It's actually a matter of shadowing variables:

var reqPos = 0,
    curPos = 0;


function viewRotate(curPos, reqPos){

At that point you've already lost access to global curPos and reqPos. Renaming these local variables is one approach.

The other is to actually process the data locally in the function, return it and do the assignment in click handler.

Upvotes: 1

sdgluck
sdgluck

Reputation: 27217

It is indeed an issue of scope. You are redefining the curPos variable within the viewRotate function's scope by preceding it with the var token. Try the following to perform assignment on the curPos that is already defined in viewRotate's 'parent' scope:

function viewRotate(reqPos) {
    curPos = reqPos;
    // ...
}

Following from this, as pointed out by @PaulRoub, you need to redefine your function signature to remove the curPos parameter as primitives are passed-by-value:

function viewRotate(reqPos) { /*...*/ }
viewRotate(0); // Now call without `curPos`

Upvotes: 4

Related Questions