函数运行后，Javascript变量会自行重置

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;
}

Answer 1

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.

Answer 2

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);
}