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.

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.

// 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

<form name="imageForm">
  <table border=3>
    <tr>
      <td>
        <input type=button value="Display Random Image">
      </td>
    </tr>
    <tr>
      <td>
        <img src="blank.jpg" name="canvas">
      </td>
    </tr>
  </table>
</form>

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.

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.

// 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

<form name="imageForm">
  <table border=3>
    <tr>
      <td>
        <input type=button value="Display Random Image">
      </td>
    </tr>
    <tr>
      <td>
        <img src="blank.jpg" name="canvas">
      </td>
    </tr>
  </table>
</form>

• javascript
• image
• random

• Look at what you get when you do Math.floor(Math.random()) in your javascript console. It will always be 0. That is because Math.random() always returns a decimal value between 0 and 1, and Math.floor() on a decimal value between 0 and 1 will always be 0. Does that help? – ithcy Commented Oct 30, 2013 at 20:36
• Where are you stuck? The comments tell you exactly what to do, and, while I appreciate it's not easy to learn something new, most of these individual requirements could be solved by simply using Google. – David Thomas Commented Oct 30, 2013 at 20:36
• I honestly have tried google. Would var num=Math.floor(Math.random()*7); work better? What do you mean by JavaScript console? I enter everything in Sublime and then save it and then open browser in firefox. – Ellen Harris Commented Oct 30, 2013 at 20:39
• Now you are getting somewhere :) next step is look up the documentation for document.getElementById(). It just returns an element from the page - now you have to do something with what it returned. – ithcy Commented Oct 30, 2013 at 20:41
• 1 You get a Javascript console when you open the Developer Tools in your web browser. (In Chrome it's called Developer Tools, in Firefox it's called Web Console.) You can enter any javascript code in the console and see the result immediately. – ithcy Commented Oct 30, 2013 at 20:42

3 Answers 3

LIVE DEMO

HTML:

<!-- 
    //In the button tag below add an onClick event handler that calls the displayImage function
    //do not pass any value to the displayImage function
-->

<form name="imageForm">
  <table border=3>
  <tr>
    <td>
      <input onclick="displayImage();" type=button value="Display Random Image">
    </td>
  </tr>
  <tr>
    <td>
      <img src="blank.jpg" name="canvas" />
    </td>
  </tr>
  </table>
</form>

JS:

//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

var imagesArray = ["dog.jpg", "fox.jpg", "mouse.jpg", "alligator.jpg", "fish.jpg", "parrot.jpg", "cat.jpg"];


//create a function named displayImage
//it should not have any values passed into it

function displayImage(){

    //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)
    var num = Math.floor(Math.random() * 7); // 0...6
    //the second statement display the random image from the imagesArray array in the canvas image using the random number as the subscript value
    document.canvas.src = imagesArray[num];

}

//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

If you want to make it even better ( A+ ;) ) use:

var num = Math.floor(Math.random() * (imagesArray.length+1)); // 0...6

You're very close! Just missing a couple things.

Your random number generator will generate a number between 0-1. To make it generate a number between 0-5 (1-6, but remember to subtract one since this is the index of your array), use this snippet:

var num = Math.floor(Math.random() * 5);

You need to add an onClick attribute to your button element.

<input type="button" onClick="displayImage()" value="Display Random Image">

Thank you for the thread! I applied this way.

JS

var imgArr = ["img.jpg","name.jpg","could.jpg","be.jpg","anything.jpg"];

function displayImg(){
    var num = Math.floor(Math.random() * (imgArr.length));
    document.canvas.src="img/"+imgArr[num];
}

HTML

<input type="button" onClick="displayImg()" value="Display Random Image">
<img src="img/dog4.jpg" name="canvas" style="width:200px"/>