Simple Javascript Function Problem

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!

---

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>

---

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>

---

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();
    };
})());