title: JavaScript Display Random Images
body: <p>At the risk of people not being happy with me again, I will post the code that I already have. Please look at the comments and let me know where I am going wrong.</p>
  
  <p>Yes this is homework, yes I have watched videos and looked at our book (JavaScript by Example) which is a horrible book by the way. I have tried to e-mail my teacher but I get nothing back. This is a 5 week intro to JavaScript class and I am obviously not understanding any of it. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// create an array named imagesArray that contains the seven image file names: dog.jpg, fox.jpg, mouse.jpg, alligator.jpg, fish.jpg, parrot.jpg and cat.jpg
  imagesArray = new Array(7);
  imagesArray[0] = new Image();
  imagesArray[0].src = new "dog.jpg";
  imagesArray[1] = new Image();
  imagesArray[1].src = new "fox.jpg";
  imagesArray[2] = new Image();
  imagesArray[2].src = new "mouse.jpg";
  imagesArray[3] = new Image();
  imagesArray[3].src = new "alligator.jpg";
  imagesArray[4] = new Image();
  imagesArray[4].src = new "fish.jpg";
  imagesArray[5] = new Image();
  imagesArray[5].src = new "parrot.jpg";
  imagesArray[6] = new Image();
  imagesArray[6].src = new "cat.jpg";
  
  function displayImage() {
    var num = Math.floor(Math.random());
    document.getElementById(imagesArray[num]);
  }
  
  // create a function named displayImage
  // it should not have any values passed into it
  // the statement block of the displayImage should have two statements
  // the first statement should generate a random number in the range 0 to 6 (the subscript values of the image file names in the imagesArray)
  // the second statement display the random image from the imagesArray array in the canvas image using the random number as the subscript value
  // when you generate the random number you might want to use the following formula
  // a random number * the number of images in the imagesArray (Hint use the appropriate Math method to generate a random number
  // remember the subscript values of the array are 0 to 6 (seven elements) zero based array
  // you will have to subtract 1 from the random number generated to account for the zero based array
  // In the button tag below add an onClick event handler that calls the displayImage function
  // do not pass any value to the displayImage function</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="imageForm"&gt;
    &lt;table border=3&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type=button value="Display Random Image"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img src="blank.jpg" name="canvas"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>