title: Trying to populate a ul in html with randomly selected word. JS
body: <p>Here's my code</p>
  
  <pre><code>    function wordPick() {
          var words = ["Calgary", "Banff", "Airdrie", "Edmonton", "Drumheller"];
  
          //List of randomly-selected words from above
          var result[];
          for(var i = 0; i&lt;3; i++) {              
              var result[i] = words[Math.floor(Math.random() * words.length)];
          }
  
          //Trying to populate the ul with words stored in result[]
          var ul = document.getElementById("list");               
          for(var i = 0; i&lt;result.length; i++) {
              o = result[i];
              alert(o);
              var li = document.createElement("li");
              li.appendChild(document.createTextNode(o.title));
              ul.appendChild(li);
          }
      }
  </code></pre>
  
  <p>Here's my HTML</p>
  
  <pre><code>&lt;button id="btnHello2" onclick="wordPick()"&gt;Populate!&lt;/button&gt;
  
  &lt;ul id="list"&gt;
      &lt;li&gt;Lady Gaga&lt;/li&gt;
      &lt;li&gt;Mickey Mouse&lt;/li&gt;
      &lt;li&gt;Toronto Pearson International Airport&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As soon as I hit Populate, the existing ul content should get overwritten by the contents of result[]. But it does not work.</p>
  
  <p>Can anyone help please?</p>