javascript - 如何正确使用document.getElementById()？

也许我不理解这个权利，或者我只是写错了东西。我正在制作一个增量游戏，并试图找出总DPS，然后我可以更改黄金的产生方式

这是我尝试使用该功能的HTML行。

    Total DPS:<span id="dps">0</span>

这是javascript

function dps(){
    dps = aadmg + daggerdmg + sworddmg;
    document.getElementById("dps").innerHTML = dps;
};

function damageClick(number){
    damage = damage + number;
    document.getElementById("damage").innerHTML = damage;
    gold =gold +1;
    document.getElementById("gold").innerHTML = gold;
    xp = damage * 2;
    document.getElementById("xp").innerHTML = xp;
};

var aadmg = 0;

function buyAA(){
var aaCost = Math.floor(10 * Math.pow(1.1,aadmg));
if(gold >= aaCost){
    aadmg = aadmg + 1;
    gold = gold - aaCost;
    document.getElementById("aadmg").innerHTML = aadmg;
    document.getElementById("gold").innerHTML = gold;
};
var nextCost = Math.floor(10 * Math.pow(1.1,aadmg));
document.getElementById('aaCost').innerHTML = nextCost;
};


function buyDagger(){
var daggerCost = Math.floor(300 * Math.pow(1.1,daggerdmg));
    if(gold >= daggerCost){
        daggerdmg = daggerdmg + 5;
        gold = gold - daggerCost;
        document.getElementById("daggerdmg").innerHTML = daggerdmg;
        document.getElementById("gold").innerHTML = gold;
     };
     var nextCost = Math.floor(300 * Math.pow(1.1,daggerdmg));
     document.getElementById('daggerCost').innerHTML = nextCost;
    };
var sworddmg = 0;

function buySword(){
var swordCost = Math.floor(500 * Math.pow(1.1,sworddmg));
if(gold >= swordCost){
    sworddmg = sworddmg + 7;
    gold = gold - swordCost;
    document.getElementById("sworddmg").innerHTML = sworddmg;
    document.getElementById("gold").innerHTML = gold;
};
var nextCost = Math.floor(500 * Math.pow(1.1,sworddmg));
document.getElementById('swordCost').innerHTML = nextCost;
};

我的想法是，我在html中使用了功能dps，然后它应该等于aadmg + daggerdmg + sworddmg。我正在使用document.getElementByID（“ dps”）。innerHTML = dps;获取元素dps。我也尝试过为所有dmg添加getElement。我对如何从HTML获取这些数字然后将它们加在一起并显示它们感到困惑。

最佳答案

我认为您误会了JavaScript中函数的调用方式。它们之所以被称为不仅仅是因为它们具有与html元素相同的名称/ id。
您将需要一些可以触发您的计算的东西。例如一个按钮。
一个按钮可以触发您的功能，如下所示：

<button id="myButton">clickme to calulate</button>
<script>
    document.getElementById('myButton').addEventListener("click", function(){
        dps();
    });
</script>

然后，您的函数dps（）必须看起来像这样：

function dps(){
    var x = aadmg + daggerdmg + sworddmg;
    document.getElementById("dps").innerHTML = x;
};

但是您应该将代码重构为具有一个对象，该对象可以保存并提供所需的所有数据，而不是具有普通的全局变量。