Javascript変数は、関数が実行された後に自身をリセットし続けます。

Question

私はゲーム用のコードをいくつか持っていて、利益と呼ばれる変数があり、ユーザーに総利益を示します。しかし、カードを開くボタンをクリックするたびに、関数が実行されるたびに、0にセルフ・バックされ、価値の値が再び追加されます。

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

あなたが利益を定義するためです関数内で関数の外で定義します。var profit = 0;それをパラメータとして関数に渡します。その後、あなたの関数でprofit + = stuffToAddToProfitを使用すると、正しく保持されます。

Answer 2

他の人が言っていることを加えて、外に利益を宣言してください。次に、利益に追加する場合：利益=利益+（他の数値）

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