updating existing javascript variables

Question

This may or maynot be a simple question as i have very limited javascript skills. All i want to do is modify a variable in a function then return the new variable value ready for use in the funcion again.

An example of this is with a simple button that each time when clicked will deduct ten points from the variable. like a gradual countdown with each click. The problem is that the variable is not updated each time it is returned.

Maybe my starting approach to javascript is way out, thats why i dont seem to be able to find out much about this. here is the code

<html>
<head>
<script type="text/javascript">

/*starting bank account*/
var bank = "200";
/* i want this function to deduct ten from the starting bank account and update the bank variable */
function Bank(bank) {
    var printout = document.getElementById("display_bank_result_here");
    bank = bank - 10;
    printout.innerHTML = bank;
    return bank;
}


</script>
</head>
<body>
<button onclick="Bank(bank)">remove 10 from bank</button>
<p id='display_bank_result_here'></p>
</body>
</html>

A pre-emptive thanks to everyone out there. i hope one day i will have enough skills to return the favour to someone else in my posistion.

Robert

First issue is that you're setting bank as a string variable, it should be var bank = 200;, edit,but as others have already answered, you don't need to pass it via the function parameter, as it's already got "global scope" — freefaller
– freefaller, Commented Jul 15, 2012 at 17:57
You're welcome, but remember to give reputation to those who have helped by submitting answers — freefaller
– freefaller, Commented Jul 15, 2012 at 18:10

ZER0 · Accepted Answer · 2012-07-15 17:59:37Z

1

That's because you shadowed the variable bank.

In the function Bank the bank variable is referring to the local one, not the global one. That shouldn't be a problem, as soon as you use the return value of the function to update your global variable:

<button onclick="bank = Bank(bank)">remove 10 from bank</button>

Of course, you could also solve it avoid the shadowing, for example:

function Bank () {
    var printout=document.getElementById("display_bank_result_here");
    bank -= 10;

    printout.innerHTML =bank;
}

Then the return is not needed.

Also, you could avoid the global variable at all, put in the printout the starting value:

<button onclick="decreaseBank()">remove 10 from bank</button>
<p id='display_bank_result_here'>200</p>

And your JS will be something like:

function decreaseBank () {
    var printout = document.getElementById("display_bank_result_here");

    // with subtraction the value of `innerHTML` will be converted in Number
    // automatically.
    var bank = printout.innerHTML - 10;

    printout.innerHTML = bank;
}

Hope it helps.

answered Jul 15, 2012 at 17:59

ZER0

25.5k5 gold badges53 silver badges57 bronze badges

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

1 Comment

Robert Brooks Over a year ago

Hey i really like the second way of doing this, it seems easier to me, thanks for the advice.

Martijn · Accepted Answer · 2017-09-29 09:32:34Z

1

This is caused by scope. Scope defines where variables and methods are defined/situated.

Everyting inside a function is inside the scope of that particular function. Your function Bank also defines that same variable bank. This overrides the variable bank you defined at the top of the script for that function.

There are two options: you could completly remove the bank variable of the function or change its name. For what you are using, I would just remove it.

change your Bank function to this

function Bank ()
{
    var printout=document.getElementById("display_bank_result_here");
    bank=bank-10;
    printout.innerHTML =bank;
    // You don't need to return it as it is changed inside the function
}

edited Sep 29, 2017 at 9:32

Martijn

16.2k4 gold badges39 silver badges73 bronze badges

answered Jul 15, 2012 at 17:56

Pirokiko

3091 silver badge6 bronze badges

Comments

Esailija · Accepted Answer · 2012-07-15 17:55:41Z

0

It is unneccesary to pass the parameter bank in the function. Just do this:

function Bank() {
    var printout = document.getElementById("display_bank_result_here");
    bank = bank - 10;
    printout.innerHTML = bank;
}

If you name the local variable (your parameter) bank, then it hides the global variable bank. The statement bank = bank - 10; will only be applied to the local variable not the global one.

edited Jul 15, 2012 at 17:55

Esailija

140k24 gold badges280 silver badges328 bronze badges

answered Jul 15, 2012 at 17:51

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Collectives™ on Stack Overflow

updating existing javascript variables

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related