Question

我有一些游戏代码，并且有一个名为profit的变量，它会向用户显示他们所获得的总利润。但每次单击打开的卡片按钮并且该功能运行时，它会将其自身重置为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);
}

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

2 个答案: