Simple Javascript Function Problem

Question

This works, with a simple button calling the addDamage function:

var damage=0;
function addDamage()
{
damage+=10;
document.getElementById("p1s").innerHTML=damage;
}

This doesn't:

var damage=0;
function addDamage(who)
{
who+=10;
document.getElementById("p1s").innerHTML=who;
}

With this button:

<button type="button" onclick="addDamage(damage)">Add</button>

It's probably obvious. I'm really new. Thanks!

• Ibu: what is who? and what's its data type

Answer 1

You are adding 10 to who within the function. Via the parameter passed on invocation, who takes the value of damage which is a global variable.

the function uses the updated value of who to set the innerHTML of an element. all that works. Then the function exits. who goes out of scope. The updated value of who is now forgotten.

When you click the button again, it uses the value of damage, which is still its original value, 0 (zero). who gets that value again, then gets 10+, which is 10, and so on.

---

To update a global variable, return it from the function, and set it in the handler.

var damage=0;
function addDamage(d)
{
 d+=10;
 document.getElementById("p1s").innerHTML=d;
 return d;
}

and

<button type="button" onclick="damage=addDamage(damage);">Add</button>

• Casey: What I'd like to do is add to the global variable: damage, but be able to reuse the function for multiple different global variables. Am I close?
• Joel Lee: @Casey - on right track, but you need to wrap your damage counter(s) in objects. See answer. +1 to @Cheeso for identifying root problem.
• Cheeso: yes, see Joel Lee's answer: stackoverflow.com/questions/5999235/… . you could also just return the updated value from the func, and set the variable in the onclick. See above edits.

Answer 2

Cheeso has identified the basic problem, which is that JavaScript parameters are passed by value. To get the behavior you want, you can wrap your counter in an object:

var player1 = { damage: 0 }; 
function addDamage(who) {
 who.damage+=10;
 document.getElementById("p1s").innerHTML=who.damage;
}

Then your button would do this:

<button type="button" onclick="addDamage(player1)">Add</button>

Presumably you would have other properties for player1 that you could put in the object as well.

To make the addDamage more flexible, you could also pass a second parameter to tell where you want to display the results:

function addDamage(who, outputId) {
 who.damage+=10;
 document.getElementById(outputId).innerHTML=who.damage;
}

Then button looks like:

<button type="button" onclick="addDamage(player1, 'p1s')">Add</button>

Answer 3

var who=0; // want to use who not damage
function addDamage(who)
{
who+=10;
document.getElementById("p1s").innerHTML=who;
}
// also change me from damage to who
<button type="button" onclick="addDamage(who)">Add</button>

the nice alternative solution would be this

<button id="addDamage"> Add </button>
<div id="showDamage"> </div>
// add handler to button
document.getElementById("addDamage").addEventListener("click", (function() {
 // damage is not stored in global space.
 var damage = 0,
 // div is only gotten once.
 div = document.getElementById("showDamage");
 // show functionality is in its own function so its easily changed
 function show() {
 div.textContent = damage;
 }
 // call show to show the initial damage
 show();
 // return event handler
 return function() {
 // change damage
 damage+=10;
 // show the new damage
 show();
 };
})());