Javascript variable keep resetting itself after function has run

Question

I have some code that is for a game and there is a variable called profit and it will show the user the total profit they have made. But every time you click the open cards button and the function runs it resets its self back to 0 and adds the worth values again.

HTML

<article id="moneysys">
    <div class="cash">Cash Spent: <span id="cash">0</span></div>
    <div class="cash">Pack Price: <span id="packprice">50</span></div>
    <div class="cash">Profit: <span id="totprofit">0</span></div>
</article>
<main>
    <center>
        <button class="open" id="conferm" onclick="opencards()">Open Cards.</button>
        <br />
        <div class=card-group>
            <img class="card" src="images/blank.png" id="canvas" />
            <div class="attatch">
                <div class="stats">Dammage: <span id="s1"></span></div>
                <div class="stats">Health: <span id="s2"></span></div>
                <div class="stats">Worth: <span id="s3"></span></div>
                <div class="stats">Intelligence: <span id="s4"></span></div>
            </div>
        </div>
        <div class=card-group>
            <img class="card" src="images/blank.png" id="canvas1" />
            <div class="attatch">
                <div class="stats">Dammage: <span id="s5"></span></div>
                <div class="stats">Health: <span id="s6"></span></div>
                <div class="stats">Worth: <span id="s7"></span></div>
                <div class="stats">Intelligence: <span id="s8"></span></div>
            </div>
        </div>
        <div class=card-group>
            <img class="card" src="images/blank.png" id="canvas2" />
            <div class="attatch">
                <div class="stats">Dammage: <span id="s9"></span></div>
                <div class="stats">Health: <span id="s10"></span></div>
                <div class="stats">Worth: <span id="s11"></span></div>
                <div class="stats">Intelligence: <span id="s12"></span></div>
            </div>
        </div>
        <div class="card-group">
            <img class="card" src="images/blank.png" id="canvas3" />
            <div class="attatch">
                <div class="stats">Dammage: <span id="s13"></span></div>
                <div class="stats">Health: <span id="s14"></span></div>
                <div class="stats">Worth: <span id="s15"></span></div>
                <div class="stats">Intelligence: <span id="s16"></span></div>
            </div>
        </div>
    </center>
</main>

JAVASCRIPT

var cards = new Array("images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png","images/6.png", "images/7.png", "images/8.png", "images/9.png");

function opencards(){
    var pc = document.getElementById("packprice").innerHTML;
    var cc = document.getElementById("cash").innerHTML;
    var cash = Number(cc) + 50;
    var cardnum = Math.floor(Math.random() * cards.length);
    var s1 = Math.floor(Math.random() * 100);
    var s2 = Math.floor(Math.random() * 100);
    var s3 = Math.floor(Math.random() * 100);
    var s4 = Math.floor(Math.random() * 100);
    var s5 = Math.floor(Math.random() * 100);
    var s6 = Math.floor(Math.random() * 100);
    var s7 = Math.floor(Math.random() * 100);
    var s8 = Math.floor(Math.random() * 100);
    var s9 = Math.floor(Math.random() * 100);
    var s10 = Math.floor(Math.random() * 100);
    var s11 = Math.floor(Math.random() * 100);
    var s12 = Math.floor(Math.random() * 100);
    var s13 = Math.floor(Math.random() * 100);
    var s14 = Math.floor(Math.random() * 100);
    var s15 = Math.floor(Math.random() * 100);
    var s16 = Math.floor(Math.random() * 100);
    document.getElementById("canvas").src = cards[cardnum];
    document.getElementById("s1").innerHTML = s1;
    document.getElementById("s2").innerHTML = s2;
    document.getElementById("s3").innerHTML = s3;
    document.getElementById("s4").innerHTML = s4;
    document.getElementById("canvas1").src = cards[cardnum];
    document.getElementById("s5").innerHTML = s5;
    document.getElementById("s6").innerHTML = s6;
    document.getElementById("s7").innerHTML = s7;
    document.getElementById("s8").innerHTML = s8;
    document.getElementById("canvas2").src = cards[cardnum];
    document.getElementById("s9").innerHTML = s9;
    document.getElementById("s10").innerHTML = s10;
    document.getElementById("s11").innerHTML = s11;
    document.getElementById("s12").innerHTML = s12;
    document.getElementById("canvas3").src = cards[cardnum];
    document.getElementById("s13").innerHTML = s13;
    document.getElementById("s14").innerHTML = s14;
    document.getElementById("s15").innerHTML = s15;
    document.getElementById("s16").innerHTML = s16;
    document.getElementById("cash").innerHTML = cash;
    var worth1 = document.getElementById("s3").innerHTML;
    var worth2 = document.getElementById("s7").innerHTML;
    var worth3 = document.getElementById("s11").innerHTML;
    var worth4 = document.getElementById("s15").innerHTML;
    var profit = Number(worth1) + Number(worth2) + Number(worth3) + Number(worth4);
    document.getElementById("totprofit").innerHTML = profit;
};

CSS

article{
    height: 500px;
    width: 200px;
    background-color: white;
    font-family: Impact, fantasy;
    border-radius: 10px;
    border: groove #0000FF 10px;
    overflow: hidden;
    float: right;
    margin-top: 100px;
    right: 5px;
}
.open{
    margin-top: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.cash{
    text-align: left;
    font-size: 30px;
    background-color: #CC3399;
    text-decoration: overline underline;
}
.card {
  height: 300px;
  width: 200px;
}
.card-group {
  float: left;
  margin: 10px;
}
.stats {
  vertical-align: middle;
}

.attatch {
  width: 200px;
  height: 72px;
  border: 2px solid black;
}

To be clear, you are trying to make the profit persist between calls? — b-d-b
– b-d-b, Commented May 2, 2016 at 19:24
Please take a look at how to create a minimal reproducible example. This will make it easier for folks to answer the question. Also, if your question is not about HTML or CSS, edit your question to not include those tags. — Heretic Monkey
– Heretic Monkey, Commented May 2, 2016 at 19:26
Why don't you use profit = s3 + s7 + s11 + s15 instead you're doing it the hard way? — Roko C. Buljan
– Roko C. Buljan, Commented May 2, 2016 at 19:27

Cameron637 · Accepted Answer · 2016-05-02 19:26:20Z

2

This is because you define profit within the function. Define it outside the function var profit = 0; and then pass it into the function as a parameter. Then use profit += stuffToAddToProfit in your function and it will be kept correctly.

answered May 2, 2016 at 19:26

Cameron637

1,71914 silver badges24 bronze badges

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

Comments

Richard · Accepted Answer · 2016-05-02 19:29:18Z

0

Adding on what others have said, declare profit outside. Then if you want to ADD to the profit, do: profit = profit + (other numbers)

var profit = 0; 
function opencards() {
   .... // setup code
   profit = profit + Number(worth1) + Number(worth2) + Number(worth3) + Number(worth4);
}

answered May 2, 2016 at 19:29

Richard

7091 gold badge11 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript variable keep resetting itself after function has run

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related