0

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.

Improve this question
4
  • Your question title says "document.getElementsById()" (with an extra "s"). Please correct it, for the benefit of future searchers. Commented May 15, 2015 at 23:54
  • You are not calling the function dps() anywhere. I think you're missunderstanding is that since the Id of the Element is dps and your function name is dps the function should be triggered. But it's not. None of your functions are called till now. Is there some code missing? Commented May 15, 2015 at 23:58
  • It sounds like you're trying to store values in the HTML? That's a horrific way to structure your application - it'll quickly collapse into unmanageable spaghetti code. Instead, you should store all values in JavaScript variables, and only write them to the DOM to display them to the user. One part of your code should be responsible for storing and updating the game state, and another part should be be responsible for displaying that state to the user. Never extract values from the DOM (unless they're user input, e.g. form controls). Commented May 16, 2015 at 0:01
  • Yeah It looks like I was never calling the function. I was the understanding that I was calling the function by using Total DPS:<span id="dps">0</span> I thought that the id would use the function for some reason. Commented May 16, 2015 at 0:05

2 Answers 2

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

"suicide function" love it!
2

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.

Improve this answer

3 Comments

This is 100% it, I was thinking that If I had the same Id and then retrieved the Id. it would then update the value. I will go back and work on changing the other functions to get the values and update it. This should solve my problem once I change them.
Please also have your data stored in objects, rather then in global variables. Makes life much easier, believe me! Also seperate your function-logic between calculating and displaying the results to html. If my answer gave you the right clue, you might as well accept it.
I did accept it and thank you! I have been playing an incremental game over the last day or 2. So it's my first time really touching javascript, html and css. I will go through and re-do my code and store them in objects. Thanks again!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.