Hendry Hendry - 3 years ago 288
Javascript Question

Javascript game

I just made this tiny game, where a user can click. And he can see his clicks, just like 'cookieclicker'.

Everything works, except for one thing.

I tried to shorten my code, by making a variable of lines of code, that i repeat alot of times.

document.getElementById("hp-bar-p").innerHTML = hp;


This works perfectly, to show the clicks the user has done. But when i try to make it into a variable, it doesn't work.
Example :

var hpdraw = document.getElementById("hp-bar-p").innerHTML = hp;


Is there a reason why i can't shorten the text by making it a variable? Or am i doing something wrong?

The whole javascript below :

<style>
#clicker {
margin: 0 auto;
background-color: white;
width: 500px;
height: 500px;
}
</style>
<link rel="stylesheet" type="text/css" href="../../style.css">

<html>
<body>
<div id="clicker">
<button id="clickerbutton" onclick="onKlik()"> Click me!</button>
<p id="clicktekst"></p><br>
<p id="hp-bar-p"></p><br>
<p id="kills"></p><br>
<button id="upgrade" onclick="upgradeKlik()">upgrade</button>

</div>

</body>
</html>


<script>
var mouseclick = 1;
var clickcounter = 0;
var i = 0;
var hp = 10;
var kills = 0;

var killdraw = document.getElementById("kills").innerHTML = kills;
var hpdraw = document.getElementById("hp-bar-p").innerHTML = hp;
document.getElementById("clicktest").innerHTML = clickcounter;
document.getElementById("hp-bar-p").innerHTML = hp;




function onKlik() {
clickcounter += mouseclick;
hp -= mouseclick;
document.getElementById("clicktekst").innerHTML = clickcounter;
document.getElementById("hp-bar-p").innerHTML = hp;

if (hp<=0) {
kills ++;
hp = 10;
document.getElementById("hp-bar-p").innerHTML = hp;
document.getElementById("kills").innerHTML = kills;
// hpdraw;
// killdraw;

}
}

function upgradeKlik() {
while (i == 0 && clickcounter >= 10) {
//mouseclick += 1;
mouseclick ++;
clickcounter -= 10;
document.getElementById("clicktekst").innerHTML = clickcounter;
break;
}
}
</script>

Answer Source

From your comment answering my "What would you use hpdraw and such for?" question:

To shorten the code, so i don't have to use document.getElementById every time.

This line:

var hpdraw = document.getElementById("hp-bar-p").innerHTML = hp;

sets hpdraw to the result of document.getElementById("hp-bar-p").innerHTML = hp, which is the value of hp.

You probably want:

var hpdraw = document.getElementById("hp-bar-p");
hpdraw.innerHTML = hp

...and then hpdraw.innerHTML = "something else" where you want to update it again later.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download