title: Using AJAX to create a datalist
body: <p>I'm trying to add to a datalist using AJAX. The webpage I'm requesting just has names of cities each on their own line. I basically have:</p>
  
  <pre><code>(function() {
  "use strict";
  
      window.onload = function() {
          fetch("cities");
      };
  
      function fetch(mode) {
          var request = new XMLHttpRequest();
          request.onload = getCities();
          request.open("GET", "https://weather.com/weather/mode=" + mode, true);
          request.send();
      }
  
      function getCities() {
          //loop while there's data/string to grab {
              var city = document.createElement("option"); 
              city.innerHTML = this.responseText; //set the option as the name of the city from the request
              document.getElementById("cities").appendChild(city);
          }
      }
  }) ();
  </code></pre>
  
  <p>The webpage is just a filler for a webpage that I'm using on a server but I'm trying to create a new option tag for each string and append it to a datalist in my html but I'm having an issue catching anything. For some reason I'm just getting an undefined error. Sorry I'm kind of new to javascript and AJAX.</p>
  
  <p>webpage layout of the page of requesting:</p>
  
  <p>Abidjan
  Accra
  Adana
  Addis Abeba
  Ahmedabad
  Aleppo
  Alexandria
  Alger
  Almaty
  Ankara
  Anshan
  Baghdad
  Baku
  Bandung
  Bangalore
  Bangkok</p>