CODEWITHSUNDEEP
javascripthtmlfunction
Stagnent
Stagnent

Reputation: 81

How to properly use document.getElementById()?

Maybe I am not understanding this right or I am just writing something wrong. I am making an incremental game and am trying to figure out total dps which then I can change how gold is generated

This is the line of HTML I am trying to use the function with.

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

This is the 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;
};

My thought was that I have function dps used in the html and then it should equal aadmg + daggerdmg + sworddmg. I am getting the element dps with the document.getElementByID("dps").innerHTML = dps;. I have also tried adding getElement for all the dmg's as well. I am confused on how to obtain those numbers from the HTML and then add them together and display them.

Upvotes: 0

Views: 1260

Answers (2)

Jeff
Jeff

Reputation: 6943

I think you're missunderstanding how functions are called in javascript. They are not called just because they have the same name/id as an html-element. You would need something that triggers your calculations. A button for example. A button could trigger your function like so:

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

Then your function dps() would have to look like that:

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

But you should refactor your code to have an object that saves and serves all the data you need, instead of having plain global variables.

Upvotes: 2

Guffa
Guffa

Reputation: 700152

You have a suicide function. When you have called the dps function once, it will have replaced itself with the value that you calculate. The next time that you try to call it, the dps identifier doesn't point to the function any more, so the code will crash.

Use a different variable in the function (and make it local by using the var keyword):

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

(It would work just to make it local, but there is no good reason to use a local variable by the same name as the function.)

Upvotes: 4

Related Questions