Using Array photos for buttons

rflynet · March 10th, 2013, 08:31 PM

Hello everyone, first post here. I have searched for an answer for my problem and tried many things posted but just can't figure it out. I have created two arrays. One of "photos" and the other of the "name" of the photo. I am using a function randomNum() to generate the selection from the name "name" Array and returning the Name and the index to test against. The problem that I am having is that I want the button to click on populated with each of the 7 images from the photos array. I can not figure how to do this and then display it on the page where I want instead of using document.write(), which opens up a new page.
here is my code that I have written so far;

Code:


<script type="text/javascript">

var photos= new Array(7)

photos[1]= "images/leafedge1.jpg"; 
photos[2]= "images/leafedge2.jpg";
photos[3]= "images/leafedge3.jpg";
photos[4]= "images/leafedge4.jpg";
photos[5]= "images/leafedge5.jpg";
photos[6]= "images/leafedge6.jpg";
photos[7]= "images/leafedge7.jpg";

var leafArray= new Array(7);

leafArray[1] = "Entire";
leafArray[2] = "Undulate";
leafArray[3] = "Finely Serrated";
leafArray[4] = "Coursely Serrated";
leafArray[5] = "Doubly Serrated";
leafArray[6] = "Crenate";
leafArray[7] = "Lobed";

function randomNum(){
 firstRandomNumber = (Math.round((Math.random()*6)+1))
  	ans = (leafArray[firstRandomNumber]+"</br>");
	num = (firstRandomNumber);
	return ans;
	return num;
	}

function checkAns(){
    .
    .
    .
    }

 
</script>


</head>



 <body bgcolor="#ffffdd">
<table>
<tr>
<td>
  <form name ="answers">
<img src="treeImage.jpg" alt="Tree Image" height="850" width="542">
  <input type="submit" value="Refresh"/>


<p>Click the button to trigger a function.</p>

<button src= leafEdge1.jpg onclick="randomNum()">Click for the leaf challenge</button>
<p id="leaf"></p>

  </form>

i was able to get the buttons as the images using the src tag but not using the Array. The purpose of the button is to ask the question populated by the ''name" array in the question and then display the images so that one may click on it for to check the answer. I am thinking that I need to use the array so that I can check the index of the array against the index of the image and if they match, they have a correct answer. my coding is probably terrible, but i am trying to learn. Any help at all would be much appreciated.