Stagnent Stagnent - 8 months ago 21
HTML Question

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.


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>
    document.getElementById('myButton').addEventListener("click", function(){

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

function dps(){
    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.