title: JavaScript API fetch does not work on first load
body: <p>Im working on this currency converting app and ufetching the API from <a href="https://exchangeratesapi.io/" rel="nofollow noreferrer">https://exchangeratesapi.io/</a></p>
  
  <p>The app works except it only fetches the api on refresh. Im using onload in body tag. </p>
  
  <p>Any idea how can I make it work on first load without refreshing? </p>
  
  <p>Thanks in advance</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
      &lt;title&gt;JS Bin&lt;/title&gt;
  
          &lt;script type="text/javascript" src="indexCurrencyFirst.js" &gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="indexCurrency.js" &gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="styleCurrency.css"&gt;  
  
  &lt;/head&gt;
  &lt;body onload="convertCurrencyRight()" &gt;
  
      &lt;nav&gt;
        &lt;ul class="navbar"&gt;
          &lt;li id="logo"&gt;&lt;img src="Assets/Logo_openCurren.svg"&gt;&lt;/li&gt; 
          &lt;li id="date"&gt;Fecha&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class="wrapper" &gt;
          &lt;div id="containerFrom"&gt;
            &lt;input id="fromQuantity" type="number" value="1" onchange="convertCurrencyRight()" onkeyup="convertCurrencyRight()"/&gt;
            &lt;select id="from" onchange="convertCurrencyRight()" onkeyup="convertCurrencyRight()"&gt;
  
  
            &lt;/select&gt;
           &lt;/div&gt;   
           &lt;div id="arrow"&gt;&lt;img src="Assets/Arrow.svg"&gt; &lt;/div&gt;
  
          &lt;div id="containerTo"&gt; 
           &lt;input id="toQuantity" type="number" value="0" onchange="convertCurrencyLeft()" onkeyup="convertCurrencyLeft()"/&gt;
            &lt;select id="to"  onchange="convertCurrencyRight()" onkeyup="convertCurrencyRight()"&gt;
              &lt;option value="EUR"  selected&gt;EUR&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;    
  
      &lt;div class="wrapper"  &gt;
          &lt;div id="containerCValues"&gt;
              &lt;p id="currentRateA"&gt; 1 Eur = 0.89 Gbp  &lt;/p&gt;
              &lt;p id="currentRateB"&gt; 1 Gbp = 1.12 Eur  &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JS files</p>
  
  <p>Loaded in head indexCurrencyFirst</p>
  
  <pre><code>//fill the select options with the available currencies      
  
  fetch("https://api.exchangeratesapi.io/latest?base=")
        .then((resp) =&gt; resp.json())
        .then(function(data){
          var allRates = data.rates;
          var selectA = document.getElementById("from");
           var selectB = document.getElementById("to");
           allRates = Object.entries(allRates)
  
  
           for(var i = 0; i &lt; allRates.length; i++) {
              var opt = allRates[i][0];
              var el = document.createElement("option");
              el.textContent = opt;
              el.value = opt;
               if(opt==="GBP"){
                   var selectedAtt=document.createAttribute("selected");
                   el.setAttributeNode(selectedAtt);
               }
              selectA.appendChild(el);
  
              var la = document.createElement("option");
               la.textContent = opt;
               la.value = opt;
               selectB.appendChild(la);
          }   
  
          })
  
          .catch(function(error) {
          console.log(error);
          });
  </code></pre>
  
  <p>and the functions which convert the rates</p>
  
  <pre><code>function convertCurrencyRight() {
      var fromCurrency = document.getElementById("from").value;
      var toCurrency = document.getElementById("to").value;
      console.log(toCurrency);
  
      fetch("https://api.exchangeratesapi.io/latest?base=" + fromCurrency)
        .then((resp) =&gt; resp.json())
        .then(function(data){
          //if both currencies are the same return identical values
          (fromCurrency===toCurrency) ? 
          (document.getElementById("toQuantity").value = document.getElementById("fromQuantity").value,
          document.getElementById("currentRateA").textContent= "1 " + fromCurrency + " = " + "...",
          document.getElementById("currentRateB").textContent= "")
          :
          //otherwise return the top value as the multiplication of top currency rate by the amount specied below
          (document.getElementById("toQuantity").value = (data.rates[toCurrency]*document.getElementById("fromQuantity").value).toFixed(3),
          //change the single amount values
          document.getElementById("currentRateA").textContent= "1 " + fromCurrency + " = " + (data.rates[toCurrency]).toFixed(6) + " " + toCurrency,
          document.getElementById("currentRateB").textContent= "1 " + toCurrency + " = " + (1/data.rates[toCurrency]).toFixed(6) + " " + fromCurrency)
          //load the date of the current rates
          var date = document.getElementById("date");
          date.innerHTML = "LAST UPDATED " +
          data.date.split("-").reverse().join("-");
  
  
          })
  
          .catch(function(error) {
          console.log(error);
          });
  }
  
  
  function convertCurrencyLeft() {
      ...
  }
  
  </code></pre>
  
  <p>Any idea how to fix this. I tried using jQuery with document ready instead of onload with luck</p>