CODEWITHSUNDEEP
javascript
Robert Brooks
Robert Brooks

Reputation: 166

updating existing javascript variables

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

Upvotes: 2

Views: 248

Answers (3)

Pirokiko
Pirokiko

Reputation: 309

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
}

Upvotes: 1

ZER0
ZER0

Reputation: 25322

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.

Upvotes: 1

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

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.

Upvotes: 0

Related Questions