title: How to properly display an image taken from an array
body: <p>I am trying to make a random image from an array appear onscreen with the page load. I know the page successfully gets a random img src, but the physical image never appears. Do I need to reference it in my html? How would I go about getting that random image src to make a visible image.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Hiragana Flash Cards&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h2&gt;Hiragana Flash Cards&lt;/h2&gt;
          &lt;script&gt;
              var imgArray = new Array();
              imgArray[0] = new Image();
              imgArray[0].src = 'a.png';
              imgArray[1] = new Image();
              imgArray[1].src = 'i.png';
              imgArray[2] = new Image();
              imgArray[2].src = 'u.png';
              imgArray[3] = new Image();
              imgArray[3].src = 'e.png';
              imgArray[4] = new Image();
              imgArray[4].src = 'o.png';
              imgArray[5] = new Image();
              imgArray[5].src = 'ka.png';
  
              function imgRandom(imgArr) {
                  return imgArr[Math.floor(Math.random() * imgArr.length)];
                  }
              console.log(imgRandom(imgArray)); 
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;      
  </code></pre>