Блог

Я создаю систему онлайн-бронирования билетов для своей курсовой работы в университете, и я хочу иметь возможность отображать, когда пользователь добавил билет в корзину по щелчку, что добавляло бы стоимость билета к промежуточному итогу по каждому клику, ограниченному 3 билетами, с помощью инструкции if. Я могу заставить его работать, когда использую 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.

Вы можете переместить следующее 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>