CODEWITHSUNDEEP
javascript
Hendry
Hendry

Reputation: 87

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>

Upvotes: 1

Views: 84

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075317

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.

Upvotes: 1

Related Questions