JSFiddle - React, Tailwind, and code Playground

by Gaurav Gandhi

HTML

<div class="row">
  Please select your ticket
  <select name="groupTicket" id="groupTicket" onchange="g_Ticket(this.value);">
    <option value="0" disabled selected>Please select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>
<div class="row">
  <tr>
    <td>Total:</td>
    <td><span id="g_total"></span></td>
    <td> </td>
  </tr>
</div>

JavaScript

function g_Ticket(ticketAmount) {
  var outOfStock = false;

  if (q_sold >= group_available) {
   alert("Tickets sold out. Sorry.");
    return;
   }
  for (var g = 1; g <= ticketAmount; g++) {
     // loop through # of tickets to see if sold out
    q_sold++;
     if (q_sold >= group_available) {
     if (g < ticketAmount) {
      alert("You can only buy " + g + " tickets... Sorry.");
       outOfStock = true;
       break;
          }

        }

       }
       if (!outOfStock) {
               alert("Thank you. We have " + (group_available - q_sold)+ " tickets left.");
            document.getElementById('groupTicket').value = 0;
      }

     }
  //the above code works fine apart from the one below.


  var total = 0;

   var ticketPrices = {
       adultFare: 10,
       childrenFare: 5,
       groupFare: 20

     };
     document.getElementById('ticketAmount').onclick = function() {
     var type = document.getElementById('g_total').value;
     var price = ticketPrices[type];
     total *= price;

     document.getElementById('groupTicket').innerHTML = total;
  };