Question 182724 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Unable to keep value saved in variable after using it once

I have working on a simple pricing calculator in javascript, all the functions and the calculations are working correctly in the first time but I am facing issues when the values change on 2nd time,
I have the following code
the flow is simple, user will select currency > then chose general or reserved seating. based on currency and seating type the values of flat cost and percentage of ticket price changes.

HTML code

    <div class="currency">
      <button class="activebutton" value="USD">$(USD)</button>
      <button value="GBP">£(UK)</button>
      <button value="CAD">$(CAD)</button>
      <button value="AUD">$(AUD)</button>
      <select>
        <option value="">Other</option>
        <option value="AED">United Arab Emirates</option>
        <option value="AFN">Afghanistan</option>
        <option value="ALL">Albania</option>
        <option value="AMD">Armenia</option>
        <option value="ANG">Netherlands Antilles</option>
        <option value="AOA">Angola</option>
        <option value="ARS">Argentina</option>
        <option value="AUD">Australia</option>
        <option value="AWG">Aruba</option>
        <option value="AZN">Azerbaijan</option>
        <option value="BAM">Bosnia and Herzegovina</option>
        <option value="BBD">Barbados</option>
        <option value="BDT">Bangladesh</option>
        <option value="BGN">Bulgaria</option>
        <option value="BHD">Bahrain</option>
        <option value="BIF">Burundi</option>
        <option value="BMD">Bermuda</option>
        <option value="BND">Brunei</option>
        <option value="BOB">Bolivia</option>
        <option value="BRL">Brazil</option>
        <option value="BSD">Bahamas</option>
        <option value="BTN">Bhutan</option>
        <option value="BWP">Botswana</option>
        <option value="BYR">Belarus</option>
        <option value="BZD">Belize</option>
        <option value="CAD">Canada</option>
        <option value="CDF">Congo, Dem. Republic</option>
        <option value="CHF">Liechtenstein</option>
        <option value="CLP">Chile</option>
        <option value="CNY">China</option>
        <option value="COP">Colombia</option>
        <option value="CRC">Costa Rica</option>
        <option value="CUP">Cuba</option>
        <option value="CVE">Cape Verde</option>
        <option value="CZK">Czech Republic</option>
        <option value="DJF">Djibouti</option>
        <option value="DKK">Denmark</option>
        <option value="DOP">Dominican Republic</option>
        <option value="DZD">Algeria</option>
        <option value="EGP">Egypt</option>
        <option value="ERN">Eritrea</option>
        <option value="ETB">Ethiopia</option>
        <option value="EUR">Andorra</option>
        <option value="FJD">Fiji</option>
        <option value="FKP">Falkland Islands</option>
        <option value="GBP">United Kingdom</option>
        <option value="GEL">Georgia</option>
        <option value="GHS">Ghana</option>
        <option value="GIP">Gibraltar</option>
        <option value="GMD">Gambia</option>
        <option value="GNF">Guinea</option>
        <option value="GTQ">Guatemala</option>
        <option value="GYD">Guyana</option>
        <option value="HKD">Hong Kong</option>
        <option value="HNL">Honduras</option>
        <option value="HRK">Croatia</option>
        <option value="HTG">Haiti</option>
        <option value="HUF">Hungary</option>
        <option value="IDR">Indonesia</option>
        <option value="ILS">Israel</option>
        <option value="IMP">Isle of Man</option>
        <option value="INR">India</option>
        <option value="IQD">Iraq</option>
        <option value="IRR">Iran</option>
        <option value="ISK">Iceland</option>
        <option value="JMD">Jamaica</option>
        <option value="JOD">Jordan</option>
        <option value="JPY">Japan</option>
        <option value="KES">Kenya</option>
        <option value="KGS">Kyrgyzstan</option>
        <option value="KHR">Cambodia</option>
        <option value="KMF">Comoros</option>
        <option value="KPW">North Korea</option>
        <option value="KRW">South Korea</option>
      </select>
    </div>
    <div class="toggle-switch-display-div">
        <label for="">General Seating</label>
        <div class="">
            <label class="toggle-switch toggle-switch-seattype">
                <input type="checkbox">
                <span class="slider"></span>
            </label>
        </div>
        <label for="">Reserved Seating</label>
    </div>
    <div>
      <label for="ticket-price">Ticket Price:</label>
      <input type="number" id="ticket-price" min="0" max="2000" step="1" value="100">
    </div>
    <div class="toggle-switch-display-div">
        <label for="">Pass On Fees</label>
        <div class="">
            <label class="toggle-switch toggle-switch-feetype">
              <input type="checkbox">
              <span class="slider"></span>
            </label>
          </div>
        <label for="">Absorb Fees</label>
    </div>
    <div>
      <button onclick="calculation()" class="calculate" value="">calculate</button>
    </div>
    
    
    <div class="three-column-container">
        <div class="column">
          <h4 class="center-align">Your attendees will pay</h4>
          <h2 class="center-align"><span id="customer-pays">$102.34</span></h2>
        </div>
        <div class="column">
          <h4 class="center-align">You will receive</h4>
          <h2 class="center-align"><span id="organizer-earnings">$100</span></h2>
        </div>
        <div class="column">
          <h4 class="center-align">yapsody Fees inccured will be</h4>
          <h2 class="center-align"><span id="yapfee">$2.34</span></h2>
        </div>
      </div>
  </div>

Javascript code

<script>
  
  let selectedcurrency = "";
  let seatType = "";
  let feeType = "";
  ticketpricefield = document.getElementById("ticket-price");
  ticketprice = ticketpricefield.value;
  ticketpricefield.addEventListener("input", function() {
    ticketprice = ticketpricefield.value;
    console.log(ticketprice);
    });
  
  
  window.addEventListener('DOMContentLoaded', (event) => {
    selectedcurrency = "USD";
    seatType = "general";
    feeType = "pass";
  });

  function calculation(){
    if (selectedcurrency !== "" && seatType !=="" && feeType !== "" && ticketprice !== "" && !isNaN(ticketprice)){
      getFlatAndPercentage();
      console.log("calculation function is back");
      console.log(currencyObject);

      ticketprice = Number(ticketprice);
      percent = parseFloat(currencyObject.percent);
      flat = parseFloat(currencyObject.flat);

      if (feeType == "absorb"){
        yapsodyfees = (ticketprice * percent) + flat;
        customer_pays = ticketprice;
        earning = ticketprice - yapsodyfees;

      }else if (feeType == "pass"){
        yapsodyfees = (ticketprice * percent) + flat;
        customer_pays = ticketprice + yapsodyfees;
        earning = ticketprice;
      }
      yapsodyfees = yapsodyfees.toFixed(2);
      earning = earning.toFixed(2);
      customer_pays = customer_pays.toFixed(2);

      
    }
    else{
      return;
    }
    displayValues()
  }

  function displayValues(){
    const customerPay = document.getElementById("customer-pays");
    const organizerRevenue = document.getElementById("organizer-earnings");
    const YapRevenue = document.getElementById("yapfee");

    customerPay.textContent = `${currencyObject.symbol}${customer_pays}`;
    organizerRevenue.textContent = `${currencyObject.symbol}${earning}`;
    YapRevenue.textContent = `${currencyObject.symbol}${yapsodyfees}`;
  }

  function getFlatAndPercentage(){
    if (seatType == "reserved"){
      allcurrencyreserved = [{currency:"AED",symbol:"",flat:"3.5",percent:"0.025"},
{currency:"AFN",symbol:"",flat:"10",percent:"0.025"},
{currency:"ALL",symbol:"",flat:"35",percent:"0.025"},
{currency:"AMD",symbol:"",flat:"110",percent:"0.025"},
{currency:"ANG",symbol:"",flat:"0.99",percent:"0.025"},
{currency:"AOA",symbol:"",flat:"99",percent:"0.025"},
{currency:"ARS",symbol:"",flat:"7",percent:"0.0225"},
{currency:"AUD",symbol:"$",flat:"0.89",percent:"0.0225"},
{currency:"AWG",symbol:"",flat:"0.99",percent:"0.025"},
{currency:"AZN",symbol:"",flat:"0.39",percent:"0.025"},
{currency:"BAM",symbol:"",flat:"0.39",percent:"0.025"},
{currency:"BBD",symbol:"",flat:"0.99",percent:"0.025"},
{currency:"BDT",symbol:"",flat:"15",percent:"0.025"},
{currency:"BGN",symbol:"",flat:"0.59",percent:"0.025"},
{currency:"BHD",symbol:"",flat:"0.2",percent:"0.025"},
{currency:"BIF",symbol:"",flat:"400",percent:"0.025"},
{currency:"BMD",symbol:"",flat:"0.99",percent:"0.025"},
{currency:"BND",symbol:"",flat:"0.59",percent:"0.025"},
{currency:"BOB",symbol:"",flat:"1.99",percent:"0.025"},
{currency:"BRL",symbol:"",flat:"0",percent:"0.0395"},
{currency:"BSD",symbol:"",flat:"0.89",percent:"0.025"},
{currency:"BTN",symbol:"",flat:"10",percent:"0.025"},
{currency:"BWP",symbol:"",flat:"3",percent:"0.025"},
{currency:"BYR",symbol:"",flat:"3000",percent:"0.025"},
{currency:"BZD",symbol:"",flat:"1.49",percent:"0.025"},
{currency:"CAD",symbol:"",flat:"0.59",percent:"0.034"},
{currency:"CDF",symbol:"",flat:"199",percent:"0.025"},
{currency:"CHF",symbol:"",flat:"1",percent:"0.024"},
{currency:"CLP",symbol:"",flat:"0",percent:"0.045"},
{currency:"CNY",symbol:"",flat:"4",percent:"0.025"},
{currency:"COP",symbol:"",flat:"0",percent:"0.045"},
{currency:"CRC",symbol:"",flat:"199",percent:"0.025"},
{currency:"CUP",symbol:"",flat:"2.5",percent:"0.025"},
{currency:"CVE",symbol:"",flat:"30",percent:"0.025"},
{currency:"CZK",symbol:"",flat:"18",percent:"0.0225"},
{currency:"DJF",symbol:"",flat:"89",percent:"0.025"},
{currency:"DKK",symbol:"",flat:"4.95",percent:"0.0225"},
{currency:"DOP",symbol:"",flat:"15",percent:"0.025"},
{currency:"DZD",symbol:"",flat:"20",percent:"0.025"},
{currency:"EGP",symbol:"",flat:"1.99",percent:"0.025"},
{currency:"ERN",symbol:"",flat:"2.99",percent:"0.025"},
{currency:"ETB",symbol:"",flat:"4.99",percent:"0.025"},
{currency:"EUR",symbol:"€",flat:"0.891",percent:"0.0225"},
{currency:"FJD",symbol:"",flat:"0.49",percent:"0.0225"},
{currency:"FKP",symbol:"",flat:"0.35",percent:"0.025"},
{currency:"GBP",symbol:"£",flat:"0.441",percent:"0.029"},
{currency:"GEL",symbol:"",flat:"0.59",percent:"0.025"},
{currency:"GHS",symbol:"",flat:"1.25",percent:"0.025"},
{currency:"GIP",symbol:"",flat:"0.49",percent:"0.025"},
{currency:"GMD",symbol:"",flat:"9",percent:"0.025"},
{currency:"GNF",symbol:"",flat:"800",percent:"0.025"},
{currency:"GTQ",symbol:"",flat:"1.99",percent:"0.025"},
{currency:"GYD",symbol:"",flat:"75",percent:"0.025"},
{currency:"HKD",symbol:"",flat:"6.95",percent:"0.0225"},
{currency:"HNL",symbol:"",flat:"7.5",percent:"0.025"},
{currency:"HRK",symbol:"",flat:"2.5",percent:"0.025"},
{currency:"HTG",symbol:"",flat:"12",percent:"0.025"},
{currency:"HUF",symbol:"",flat:"180",percent:"0.0225"},
{currency:"IDR",symbol:"",flat:"2900",percent:"0.025"},
{currency:"ILS",symbol:"",flat:"0",percent:"0.0225"},
{currency:"IMP",symbol:"",flat:"0.65",percent:"0.025"},
{currency:"INR",symbol:"",flat:"12",percent:"0.025"},
{currency:"IQD",symbol:"",flat:"400",percent:"0.025"},
{currency:"IRR",symbol:"",flat:"5000",percent:"0.025"},
{currency:"ISK",symbol:"",flat:"99",percent:"0.025"},
{currency:"JMD",symbol:"",flat:"49",percent:"0.025"},
{currency:"JOD",symbol:"",flat:"0.4",percent:"0.025"},
{currency:"JPY",symbol:"",flat:"0",percent:"0.0225"},
{currency:"KES",symbol:"",flat:"25",percent:"0.025"},
{currency:"KGS",symbol:"",flat:"15",percent:"0.025"},
{currency:"KHR",symbol:"",flat:"800",percent:"0.025"},
{currency:"KMF",symbol:"",flat:"50",percent:"0.025"},
{currency:"KPW",symbol:"",flat:"50",percent:"0.0125"},
{currency:"KRW",symbol:"",flat:"800",percent:"0.025"},
{currency:"KWD",symbol:"",flat:"0.25",percent:"0.025"},
{currency:"KYD",symbol:"",flat:"0.79",percent:"0.025"},
{currency:"KZT",symbol:"",flat:"79",percent:"0.025"},
{currency:"LAK",symbol:"",flat:"800",percent:"0.025"},
{currency:"LBP",symbol:"",flat:"900",percent:"0.025"},
{currency:"LKR",symbol:"",flat:"25",percent:"0.025"},
{currency:"LRD",symbol:"",flat:"15",percent:"0.025"},
{currency:"LSL",symbol:"",flat:"3",percent:"0.025"},
{currency:"LYD",symbol:"",flat:"0.4",percent:"0.025"},
{currency:"MAD",symbol:"",flat:"3",percent:"0.025"},
{currency:"MDL",symbol:"",flat:"4",percent:"0.025"},
{currency:"MGF",symbol:"",flat:"500",percent:"0.025"},
{currency:"MKD",symbol:"",flat:"10",percent:"0.025"},
{currency:"MMK",symbol:"",flat:"200",percent:"0.025"},
{currency:"MNT",symbol:"",flat:"500",percent:"0.025"},
{currency:"MOP",symbol:"",flat:"8",percent:"0.025"},
{currency:"MRO",symbol:"",flat:"30",percent:"0.025"},
{currency:"MUR",symbol:"",flat:"15",percent:"0.025"},
{currency:"MVR",symbol:"",flat:"6",percent:"0.025"},
{currency:"MWK",symbol:"",flat:"200",percent:"0.025"},
{currency:"MXN",symbol:"",flat:"0",percent:"0.035"},
{currency:"MYR",symbol:"",flat:"0",percent:"0.0225"},
{currency:"MZN",symbol:"",flat:"15",percent:"0.025"},
{currency:"NAD",symbol:"",flat:"3.5",percent:"0.025"},
{currency:"NGN",symbol:"",flat:"90",percent:"0.025"},
{currency:"NIO",symbol:"",flat:"8",percent:"0.025"},
{currency:"NOK",symbol:"",flat:"5.85",percent:"0.0225"},
{currency:"NPR",symbol:"",flat:"15",percent:"0.025"},
{currency:"NZD",symbol:"",flat:"0.441",percent:"0.03"},
{currency:"OMR",symbol:"",flat:"0.25",percent:"0.025"},
{currency:"PAB",symbol:"",flat:"0.35",percent:"0.025"},
{currency:"PEN",symbol:"",flat:"0",percent:"0.045"},
{currency:"PGK",symbol:"",flat:"1.49",percent:"0.025"},
{currency:"PHP",symbol:"",flat:"0",percent:"0.0225"},
{currency:"PKR",symbol:"",flat:"25",percent:"0.025"},
{currency:"PLN",symbol:"",flat:"2.7",percent:"0.0225"},
{currency:"PYG",symbol:"",flat:"1700",percent:"0.025"},
{currency:"QAR",symbol:"",flat:"3.5",percent:"0.025"},
{currency:"RON",symbol:"",flat:"1.5",percent:"0.025"},
{currency:"RSD",symbol:"",flat:"25",percent:"0.025"},
{currency:"RUB",symbol:"",flat:"60",percent:"0.025"},
{currency:"RWF",symbol:"",flat:"200",percent:"0.025"},
{currency:"SAR",symbol:"",flat:"3",percent:"0.025"},
{currency:"SBD",symbol:"",flat:"0.99",percent:"0.025"},
{currency:"SCR",symbol:"",flat:"2.5",percent:"0.025"},
{currency:"SDG",symbol:"",flat:"2",percent:"0.025"},
{currency:"SEK",symbol:"",flat:"6.3",percent:"0.0225"},
{currency:"SGD",symbol:"",flat:"1.1",percent:"0.0225"},
{currency:"SHP",symbol:"",flat:"0.3",percent:"0.025"},
{currency:"SLL",symbol:"",flat:"500",percent:"0.025"},
{currency:"SOS",symbol:"",flat:"80",percent:"0.025"},
{currency:"SRD",symbol:"",flat:"1.25",percent:"0.025"},
{currency:"SSP",symbol:"",flat:"0.3",percent:"0.025"},
{currency:"STD",symbol:"",flat:"2000",percent:"0.025"},
{currency:"SYP",symbol:"",flat:"40",percent:"0.025"},
{currency:"SZL",symbol:"",flat:"4.25",percent:"0.025"},
{currency:"THB",symbol:"",flat:"0",percent:"0.0225"},
{currency:"TJS",symbol:"",flat:"1.2",percent:"0.025"},
{currency:"TMT",symbol:"",flat:"0.3",percent:"0.025"},
{currency:"TND",symbol:"",flat:"0.35",percent:"0.025"},
{currency:"TOP",symbol:"",flat:"0.2",percent:"0.025"},
{currency:"TRY",symbol:"",flat:"0",percent:"0.0225"},
{currency:"TTD",symbol:"",flat:"3",percent:"0.025"},
{currency:"TWD",symbol:"",flat:"0",percent:"0.0225"},
{currency:"TZS",symbol:"",flat:"750",percent:"0.025"},
{currency:"UAH",symbol:"",flat:"5",percent:"0.025"},
{currency:"UGX",symbol:"",flat:"800",percent:"0.025"},
{currency:"USD",symbol:"$",flat:"0.98",percent:"0.0249"}];
      currencyObject = allcurrencyreserved.find(function(e){
        return e.currency == selectedcurrency;
      });
    }else if (seatType == "general"){
      allcurrencygeneral=[{currency:"AED",symbol:"",flat:"1.75",percent:"0.0125"},
{currency:"AFN",symbol:"",flat:"5",percent:"0.0125"},
{currency:"ALL",symbol:"",flat:"17.5",percent:"0.0125"},
{currency:"AMD",symbol:"",flat:"55",percent:"0.0125"},
{currency:"ANG",symbol:"",flat:"0.49",percent:"0.0125"},
{currency:"AOA",symbol:"",flat:"49",percent:"0.0125"},
{currency:"ARS",symbol:"",flat:"5.5",percent:"0.0175"},
{currency:"AUD",symbol:"$",flat:"0.693",percent:"0.0175"},
{currency:"AWG",symbol:"",flat:"0.49",percent:"0.0125"},
{currency:"AZN",symbol:"",flat:"0.19",percent:"0.0125"},
{currency:"BAM",symbol:"",flat:"0.19",percent:"0.0125"},
{currency:"BBD",symbol:"",flat:"0.49",percent:"0.0125"},
{currency:"BDT",symbol:"",flat:"7.5",percent:"0.0125"},
{currency:"BGN",symbol:"",flat:"0.29",percent:"0.0125"},
{currency:"BHD",symbol:"",flat:"0.1",percent:"0.0125"},
{currency:"BIF",symbol:"",flat:"200",percent:"0.0125"},
{currency:"BMD",symbol:"",flat:"0.49",percent:"0.0125"},
{currency:"BND",symbol:"",flat:"0.29",percent:"0.0125"},
{currency:"BOB",symbol:"",flat:"0.99",percent:"0.0125"},
{currency:"BRL",symbol:"",flat:"0",percent:"0.03465"},
{currency:"BSD",symbol:"",flat:"0.45",percent:"0.0125"},
{currency:"BTN",symbol:"",flat:"5",percent:"0.0125"},
{currency:"BWP",symbol:"",flat:"1.5",percent:"0.0125"},
{currency:"BYR",symbol:"",flat:"1500",percent:"0.0125"},
{currency:"BZD",symbol:"",flat:"0.75",percent:"0.0125"},
{currency:"CAD",symbol:"$",flat:"0.49",percent:"0.028"},
{currency:"CDF",symbol:"",flat:"99",percent:"0.0125"},
{currency:"CHF",symbol:"",flat:"0.7",percent:"0.0175"},
{currency:"CLP",symbol:"",flat:"0",percent:"0.03465"},
{currency:"CNY",symbol:"",flat:"2",percent:"0.0125"},
{currency:"COP",symbol:"",flat:"0",percent:"0.03465"},
{currency:"CRC",symbol:"",flat:"99",percent:"0.0125"},
{currency:"CUP",symbol:"",flat:"1.25",percent:"0.0125"},
{currency:"CVE",symbol:"",flat:"15",percent:"0.0125"},
{currency:"CZK",symbol:"",flat:"14",percent:"0.0175"},
{currency:"DJF",symbol:"",flat:"45",percent:"0.0125"},
{currency:"DKK",symbol:"",flat:"4",percent:"0.0175"},
{currency:"DOP",symbol:"",flat:"7.5",percent:"0.0125"},
{currency:"DZD",symbol:"",flat:"10",percent:"0.0125"},
{currency:"EGP",symbol:"",flat:"1",percent:"0.0125"},
{currency:"ERN",symbol:"",flat:"1.49",percent:"0.0125"},
{currency:"ETB",symbol:"",flat:"2.49",percent:"0.0125"},
{currency:"EUR",symbol:"€",flat:"0.59",percent:"0.0175"},
{currency:"FJD",symbol:"",flat:"0.25",percent:"0.0125"},
{currency:"FKP",symbol:"",flat:"0.175",percent:"0.0125"},
{currency:"GBP",symbol:"",flat:"0.392",percent:"0.028"},
{currency:"GEL",symbol:"",flat:"0.29",percent:"0.0125"},
{currency:"GHS",symbol:"",flat:"0.625",percent:"0.0125"},
{currency:"GIP",symbol:"",flat:"0.25",percent:"0.0125"},
{currency:"GMD",symbol:"",flat:"4.5",percent:"0.0125"},
{currency:"GNF",symbol:"",flat:"400",percent:"0.0125"},
{currency:"GTQ",symbol:"",flat:"0.99",percent:"0.0125"},
{currency:"GYD",symbol:"",flat:"37.5",percent:"0.0125"},
{currency:"HKD",symbol:"",flat:"6",percent:"0.0175"},
{currency:"HNL",symbol:"",flat:"3.75",percent:"0.0125"},
{currency:"HRK",symbol:"",flat:"1.25",percent:"0.0125"},
{currency:"HTG",symbol:"",flat:"6",percent:"0.0125"},
{currency:"HUF",symbol:"",flat:"140",percent:"0.0175"},
{currency:"IDR",symbol:"",flat:"1500",percent:"0.0125"},
{currency:"ILS",symbol:"",flat:"0",percent:"0.0175"},
{currency:"IMP",symbol:"",flat:"0.325",percent:"0.0125"},
{currency:"INR",symbol:"",flat:"6",percent:"0.0125"},
{currency:"IQD",symbol:"",flat:"200",percent:"0.0125"},
{currency:"IRR",symbol:"",flat:"2500",percent:"0.0125"},
{currency:"ISK",symbol:"",flat:"49",percent:"0.0125"},
{currency:"JMD",symbol:"",flat:"25",percent:"0.0125"},
{currency:"JOD",symbol:"",flat:"0.2",percent:"0.0125"},
{currency:"JPY",symbol:"",flat:"0",percent:"0.0175"},
{currency:"KES",symbol:"",flat:"12.5",percent:"0.0125"},
{currency:"KGS",symbol:"",flat:"7.5",percent:"0.0125"},
{currency:"KHR",symbol:"",flat:"400",percent:"0.0125"},
{currency:"KMF",symbol:"",flat:"25",percent:"0.0125"},
{currency:"KPW",symbol:"",flat:"50",percent:"0.0125"},
{currency:"KRW",symbol:"",flat:"400",percent:"0.0125"},
{currency:"KWD",symbol:"",flat:"0.125",percent:"0.0125"},
{currency:"KYD",symbol:"",flat:"0.39",percent:"0.0125"},
{currency:"KZT",symbol:"",flat:"39",percent:"0.0125"},
{currency:"LAK",symbol:"",flat:"400",percent:"0.0125"},
{currency:"LBP",symbol:"",flat:"450",percent:"0.0125"},
{currency:"LKR",symbol:"",flat:"12.5",percent:"0.0125"},
{currency:"LRD",symbol:"",flat:"7.5",percent:"0.0125"},
{currency:"LSL",symbol:"",flat:"1.5",percent:"0.0125"},
{currency:"LYD",symbol:"",flat:"0.2",percent:"0.0125"},
{currency:"MAD",symbol:"",flat:"1.5",percent:"0.0125"},
{currency:"MDL",symbol:"",flat:"2",percent:"0.0125"},
{currency:"MGF",symbol:"",flat:"250",percent:"0.0125"},
{currency:"MKD",symbol:"",flat:"5",percent:"0.0125"},
{currency:"MMK",symbol:"",flat:"100",percent:"0.0125"},
{currency:"MNT",symbol:"",flat:"250",percent:"0.0125"},
{currency:"MOP",symbol:"",flat:"4",percent:"0.0125"},
{currency:"MRO",symbol:"",flat:"15",percent:"0.0125"},
{currency:"MUR",symbol:"",flat:"7.5",percent:"0.0125"},
{currency:"MVR",symbol:"",flat:"3",percent:"0.0125"},
{currency:"MWK",symbol:"",flat:"100",percent:"0.0125"},
{currency:"MXN",symbol:"",flat:"0",percent:"0.035"},
{currency:"MYR",symbol:"",flat:"0",percent:"0.0175"},
{currency:"MZN",symbol:"",flat:"7.5",percent:"0.0125"},
{currency:"NAD",symbol:"",flat:"1.75",percent:"0.0125"},
{currency:"NGN",symbol:"",flat:"45",percent:"0.0125"},
{currency:"NIO",symbol:"",flat:"4",percent:"0.0125"},
{currency:"NOK",symbol:"",flat:"4.5",percent:"0.0175"},
{currency:"NPR",symbol:"",flat:"7.5",percent:"0.0125"},
{currency:"NZD",symbol:"",flat:"0.39",percent:"0.03"},
{currency:"OMR",symbol:"",flat:"0.125",percent:"0.0125"},
{currency:"PAB",symbol:"",flat:"0.175",percent:"0.0125"},
{currency:"PEN",symbol:"",flat:"0",percent:"0.035"},
{currency:"PGK",symbol:"",flat:"0.75",percent:"0.0125"},
{currency:"PHP",symbol:"",flat:"0",percent:"0.0175"},
{currency:"PKR",symbol:"",flat:"12.5",percent:"0.0125"},
{currency:"PLN",symbol:"",flat:"2.1",percent:"0.0175"},
{currency:"PYG",symbol:"",flat:"850",percent:"0.0125"},
{currency:"QAR",symbol:"",flat:"1.75",percent:"0.0125"},
{currency:"RON",symbol:"",flat:"0.75",percent:"0.0125"},
{currency:"RSD",symbol:"",flat:"12.5",percent:"0.0125"},
{currency:"RUB",symbol:"",flat:"30",percent:"0.0125"},
{currency:"RWF",symbol:"",flat:"100",percent:"0.0125"},
{currency:"SAR",symbol:"",flat:"1.5",percent:"0.0125"},
{currency:"SBD",symbol:"",flat:"0.49",percent:"0.0125"},
{currency:"SCR",symbol:"",flat:"1.25",percent:"0.0125"},
{currency:"SDG",symbol:"",flat:"1",percent:"0.0125"},
{currency:"SEK",symbol:"",flat:"5",percent:"0.0175"},
{currency:"SGD",symbol:"",flat:"0.89",percent:"0.0175"},
{currency:"SHP",symbol:"",flat:"0.15",percent:"0.0125"},
{currency:"SLL",symbol:"",flat:"250",percent:"0.0125"},
{currency:"SOS",symbol:"",flat:"40",percent:"0.0125"},
{currency:"SRD",symbol:"",flat:"0.625",percent:"0.0125"},
{currency:"SSP",symbol:"",flat:"0.15",percent:"0.0125"},
{currency:"STD",symbol:"",flat:"1000",percent:"0.0125"},
{currency:"SYP",symbol:"",flat:"20",percent:"0.0125"},
{currency:"SZL",symbol:"",flat:"2.125",percent:"0.0125"},
{currency:"THB",symbol:"",flat:"0",percent:"0.0175"},
{currency:"TJS",symbol:"",flat:"0.6",percent:"0.0125"},
{currency:"TMT",symbol:"",flat:"0.15",percent:"0.0125"},
{currency:"TND",symbol:"",flat:"0.175",percent:"0.0125"},
{currency:"TOP",symbol:"",flat:"0.1",percent:"0.0125"},
{currency:"TRY",symbol:"",flat:"0",percent:"0.0175"},
{currency:"TTD",symbol:"",flat:"1.5",percent:"0.0125"},
{currency:"TWD",symbol:"",flat:"0",percent:"0.0175"},
{currency:"TZS",symbol:"",flat:"375",percent:"0.0125"},
{currency:"UAH",symbol:"",flat:"2.5",percent:"0.0125"},
{currency:"UGX",symbol:"",flat:"400",percent:"0.0125"},
{currency:"USD",symbol:"$",flat:"0.594",percent:"0.0175"}];
      currencyObject = allcurrencygeneral.find(function(e){
        return e.currency == selectedcurrency;
      });
    }
    return currencyObject;
  }
  
  const buttons = document.getElementsByTagName("button");
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", function() {
        const activeButtons = document.getElementsByClassName("activebutton");
        for (let j = 0; j < activeButtons.length; j++) {
          activeButtons[j].classList.remove("activebutton");
        }
        this.classList.add("activebutton");
        selectedcurrency = this.value;
        console.log(selectedcurrency);

      });
    }

    const selectField = document.getElementsByTagName("select")[0];
    selectField.addEventListener("change", function() {
        const activeButtons = document.getElementsByClassName("activebutton");
        for (let i = 0; i < activeButtons.length; i++) {
            activeButtons[i].classList.remove("activebutton");
        }
        this.classList.add("activebutton");
        selectedcurrency = this.value;
        console.log(selectedcurrency)
    });

    // toggle switch values seat type
    const toggleSwitchSeattype = document.querySelector('.toggle-switch-seattype input');
    toggleSwitchSeattype.addEventListener('change', function() {
      if (this.checked) {
        // Toggle is on
        seatType = "reserved";
        console.log(seatType);

      } else {
        // Toggle is off
        seatType = "general";
        console.log(seatType);

      }
    });

    // toggle switch values fee type
    const toggleSwitchFeetype = document.querySelector('.toggle-switch-feetype input');
    toggleSwitchFeetype.addEventListener('change', function() {
      if (this.checked) {
        // Toggle is on
        feeType = "absorb";
        console.log(feeType);

      } else {
        // Toggle is off
        feeType = "pass";
        console.log(feeType);

      }
    });




</script>

The issue that I am facing is that,

  1. once user has selected currency, seat type, fee type, ticket price and clicks calculate the currency gets unselected and also the value of currency is erased from the variable.

  2. due to this if user has already selected a value from dropdown and done calculation, they need to refresh the page, reselect the value and then perform a new calculation.

  3. since the value of currency gets erased on clicking calculate, when user now tries to change the ticket price seat type or fee type and click calculate, the calculator does nothing

I think all my issues are related to the currency value getting erased

Also attaching the code for CSS styling

  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: auto;
      width: 100%;
      
    }
    .container label{
        font-size: 20px;
    }
    .container > div {
      padding: 10px;
    }
    
    .calculate{
        background: #e40046;
        color: white;
        border: 1px solid #e40046;
        border-radius: 5px;
        padding: 14px 50px;
        margin: 10px;
        cursor: pointer;
    }
    .currency > button, select{
        background: white;
        color: #e40046;
        border: 1px solid #e40046;
        border-radius: 5px;
        padding: 14px 50px;
        margin: 10px;
    }
    .currency > select{
      padding: 14px 10px;
    }
    .currency > button:hover, select:hover{
        background: #e40046;
        border: 1px solid #e40046;
        border-radius: 5px;
        color: white;

    }
    .currency > .activebutton{
        background: #e40046;
        color: white;
    }

    .toggle-switch-display-div{
        display: flex;
        padding: 20px;
        flex-direction: row;
        /* justify-content: center; */
        align-items: center;
    }
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      margin: 10px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: white;
      transition: .4s;
      border-radius: 34px;
      border: 1px solid #e40046;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 3px;
      background-color: #e40046;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #e40046;
    }

    input:checked + .slider:before {
      transform: translateX(26px);
      background-color: white;
    }

    .three-column-container {
      display: flex;
      width: 70%;
    }
    
    .column {
      flex: 1;
      border: 1px solid #e40046;
      border-radius: 10px;
      padding: 14px 15px;
      margin: 10px;
    }
    
    .center-align {
      text-align: center;
    }
  </style>
Tags:

2

Answers


  1. 0

    function exampleFunction() {
    var variable = 10; // Variable declaration

    console.log(variable); // Output: 10

    // Variable value used once

    // Code logic continues…

    // Variable value is not retained

    console.log(variable); // Output: undefined (variable is no longer accessible)
    }

    exampleFunction();

    Login or Signup to reply.
  2. 0

    By doing this const buttons = document.getElementsByTagName("button"); you get every button element in the document, including your calculate button so everything inside your eventlistener was applied to that button as well, what I changed here was to add button class to your buttons and get those with getElementsByClassName instead.
    By doing this you avoid applying the same logic to your calculate button.

    const buttons = document.getElementsByClassName("button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    const activeButtons = document.getElementsByClassName("activebutton");
    for (let j = 0; j < activeButtons.length; j++) {
      activeButtons[j].classList.remove("activebutton");
    }
    this.classList.add("activebutton");
    selectedcurrency = this.value;
    console.log(selectedcurrency);

  });
}
    <button class="button activebutton" value="USD">$(USD)</button>
   <button class="button" value="GBP">£(UK)</button>
   <button class="button" value="CAD">$(CAD)</button>
   <button class="button" value="AUD">$(AUD)</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search