javascript - 尝试向字符串添加值，并且每次都会不断添加 1

Question

我正在为我的大学类(class)创建一个在线票务预订系统，我希望能够在用户点击将票添加到购物车时显示，这会将票的值(value)添加到每个的小计中通过 if 语句点击上限为 3 张票。当我使用 golfTotal 时我可以让它工作，但出于某种原因，当我尝试将它添加到小计时，第一次点击时没有注册，但它在第二次、第三次和第四次点击时有效。

我试过设置它，所以当按钮被点击时它不会通过 if 语句，而只是改变总数并在每次点击时添加它。不确定我还能尝试什么。

<div class="golf">
    <p id="golfTotalTickets">0</p>
    <p id="golfTotal"></p>
    <p><button onclick="golfAdd();" id="golfAdd">Add to Cart</button></p>
</div>                          

<div class="subtotal">
<div class="subtotal_text">
<h3 id="subtotal">Subtotal: £ <h3 id="total"> 
0.00</h3></h3><br>
</div>

var total = 0;
var golfTotal = 0;
var golfTotalTickets = 0;

function golfAdd() {

    golfTotalTickets += 1;
    document.getElementById("total").innerHTML = total.toFixed(2);

    if (golfTotalTickets <= 1) {
    golfTotal = 15;
    total += 15;
    document.getElementById("golfTotalTickets").innerHTML = golfTotalTickets + " Ticket";
    document.getElementById("golfTotal").innerHTML = golfTotal.toFixed(2);
    } else if (golfTotalTickets == 2){
    golfTotal += 15
    total += 15
    document.getElementById("golfTotalTickets").innerHTML = golfTotalTickets + " Tickets";
    document.getElementById("golfTotal").innerHTML = golfTotal.toFixed(2);
    } else if (golfTotalTickets == 3){
    golfTotal += 15
    total += 15
    document.getElementById("golfTotalTickets").innerHTML = golfTotalTickets + " Tickets";
    document.getElementById("golfTotal").innerHTML = golfTotal.toFixed(2);
    }else{
            window.alert("You are not allowed to buy more than 3 tickets for The Open.");
    }
}

单击该按钮时，每次单击时小计的值应增加 15，除非 golfTotalTickets 达到 3，它的上限应为 45。

Answer 1

可以将下面的document.getElementById("total").innerHTML = total.toFixed(2);移到计算之后。原因是您的计算尚未在您的 if-else 之前完成。

见片段:

var total = 0;
var golfTotal = 0;
var golfTotalTickets = 0;

function golfAdd() {

    golfTotalTickets += 1;
    //document.getElementById("total").innerHTML = total.toFixed(2); //move from there to after if else

    if (golfTotalTickets <= 1) {
    golfTotal = 15;
    total += 15;
    document.getElementById("golfTotalTickets").innerHTML = golfTotalTickets + " Ticket";
    document.getElementById("golfTotal").innerHTML = golfTotal.toFixed(2);
    } else if (golfTotalTickets == 2){
    golfTotal += 15
    total += 15
    document.getElementById("golfTotalTickets").innerHTML = golfTotalTickets + " Tickets";
    document.getElementById("golfTotal").innerHTML = golfTotal.toFixed(2);
    } else if (golfTotalTickets == 3){
    golfTotal += 15
    total += 15
    document.getElementById("golfTotalTickets").innerHTML = golfTotalTickets + " Tickets";
    document.getElementById("golfTotal").innerHTML = golfTotal.toFixed(2);
    }else{
            window.alert("You are not allowed to buy more than 3 tickets for The Open.");
    }
    document.getElementById("total").innerHTML = total.toFixed(2); //here
}

<div class="golf">
    <p id="golfTotalTickets">0</p>
    <p id="golfTotal"></p>
    <p><button onclick="golfAdd();" id="golfAdd">Add to Cart</button></p>
</div>                          

<div class="subtotal">
<div class="subtotal_text">
<h3 id="subtotal">Subtotal: £ <h3 id="total"> 
0.00</h3></h3><br>
</div>