title: How do I set a default option using Javascript?
body: <p>I'm trying to build a currency converter for a gaming marketplace &amp; I currently have it so that the appropriate icon for each currency/payment method appears within the input bar - It has a default option for the payment option, but the span is blank until the user clicks a country. How do I set a default so that an icon appears 100% of the time?</p>
  
  <p>I managed to make it work with the payment method icon, but i'm missing something with the country icon</p>
  
  <p><a href="https://codepen.io/anon/pen/byXrWN" rel="nofollow noreferrer">https://codepen.io/anon/pen/byXrWN</a></p>
  
  <pre><code>    const data = [
      {
          currency: 'paypal',
          we_buy: 0.50,
          we_sell: 0.68,
          img_path: 'img/paypal.svg',
          icon: 'fab fa-paypal'
      },
      {
          currency: 'debit',
          we_buy: 0.67,
          we_sell: 0.82,
          img_path: 'img/debit-card.svg',
          icon: 'far fa-credit-card'
      },
      {
          currency: 'btc',
          we_buy: 0.58,
          we_sell: 0.77,
          img_path: 'img/bitcoin.svg',
          icon: 'fab fa-btc'
      },
      {
          currency: 'ethereum',
          we_buy: 0.59,
          we_sell: 0.76,
          img_path: 'img/ethereum.svg',
          icon: 'fab fa-ethereum'
      }
  ];
  
  const country = [
      {
          country_id: 'USA',
          country_currency: 'USD',
          img_path: 'img/united-states.svg',
          icon: 'fas fa-dollar-sign',
          rate: 1.0
      },
      {
          country_id: 'EUR',
          country_currency: 'EUR',
          img_path: 'img/european-union.svg',
          icon: 'fas fa-euro-sign',
          rate: 0.88
      },
      {
          country_id: 'UK',
          country_currency: 'GBP',
          img_path: 'img/united-kingdom.svg',
          icon: 'fas fa-pound-sign',
          rate: 0.78
      },  
      {
          country_id: 'CAN',
          country_currency: 'CAD',
          img_path: 'img/canada.svg',
          icon: 'fas fa-dollar-sign',
          rate: 1.33
      }
  ];
  
  const countryContainer = document.getElementById("countries");
  let selectedCountry = null;
  var selectCountry = function (index) {
      const cdata = country[index];
      selectedCountry = country[index];
      document.getElementById("country-selected").innerHTML = `Country selected: ${cdata.country_currency}`;
      document.getElementById("country_icon").className = cdata.icon;
  };
  
  // Image container
  
  const imagesContainer = document.getElementById("currencies");
  let selectedCurrency = null;
  var selectCurrency = function (index) {
      const element = data[index];
      selectedCurrency = data[index];
      document.getElementById("currency-selected").innerHTML = `Currency selected: ${element.currency}`;
      document.getElementById("data_icon").className = element.icon; 
  };
  
  // made function originally in amount.onkeyup have a greater scope
  const calculate = () =&gt; {
      const output_we_sell = document.getElementById("output_we_sell");
      if (amount.value === '') {
          output_we_sell.innerHTML = 0;
          return;
      }
      if (!isNaN(amount.value)) {
          output_we_sell.innerHTML = `${(+amount.value * selectedCurrency.we_sell).toFixed(2)}`;
      }
  };
  // ...
  var selectCurrency = function (index) {
      const element = data[index];
      selectedCurrency = data[index];
      document.getElementById("currency-selected").innerHTML = `Currency selected: ${element.currency}`;
      document.getElementById("data_icon").className = element.icon;
      calculate(); // Added calculate here
  };
  
  var selectCountry = function (index) {
      const cdata = country[index];
      selectedCountry = country[index];
      document.getElementById("country-selected").innerHTML = `Currency selected: ${cdata.country}`;
      document.getElementById("country_icon").className = cdata.icon;
      calculate();
  };
  
  // ...
  (() =&gt; {
      for (let i = 0; i &lt; data.length; i++) {
          imagesContainer.innerHTML += `&lt;div class="currency" onclick=selectCurrency(${i})&gt;&lt;img id=${i} src=${data[i].img_path}&gt;&lt;/div&gt;`;
      }
      selectCurrency(0);
      const amount = document.getElementById("amount");
      amount.onkeyup = calculate; // Changed this to use the calculate function{
      for (let i = 0; i &lt; country.length; i++) {
          countryContainer.innerHTML += `&lt;div class="country" onclick=selectCountry(${i})&gt;&lt;img id=${i} src=${country[i].img_path}&gt;&lt;/div&gt;`; 
      }
  }
  
  )();
  </code></pre>
  
  <p>The top row is meant to be the country selection &amp; the bottom row is the payment method (poorly named in the html/js - currency = payment method)</p>
  
  <p>an icon for the payment method should appear as the page loads, rather than after the user has clicked on their country of origin</p>