Question

这很有效，只需一个简单的按钮调用addDamage函数：

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

这不是：

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

使用此按钮：

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

这可能很明显。我真的很新。谢谢！

Answer 1

您要在函数中向who添加10。通过调用传递的参数，who获取damage的值，这是一个全局变量。

该函数使用who的更新值来设置元素的innerHTML。一切正常。然后该功能退出。 who超出了范围。现在忘记了who的更新值。

再次单击该按钮时，它将使用damage的值，该值仍为其原始值0（零）。 who再次获得该值，然后获得10+，即10，依此类推。

要更新全局变量，请从函数返回它，并在处理程序中设置它。

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

和

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

Answer 2

Cheeso已经确定了基本问题，即JavaScript参数是按值传递的。要获得所需的行为，可以将计数器包装在一个对象中：

var player1 = { damage: 0 }; 

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

然后你的按钮会这样做：

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

据推测，你可以将player1的其他属性放入对象中。

为了使addDamage更灵活，您还可以传递第二个参数来告诉您要显示结果的位置：

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

然后按钮看起来像：

<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>

不错的替代解决方案就是这个

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

简单的Javascript函数问题

3 个答案: