Radio buttons change image display

JavaScript
1

Hi I am having trouble getting the following code to work. I just want to make the script in the head work, the html in the body is to stay as it is. I want to use an array. I can make it work very well without an array, using separate conditional statements for each radio button, but that is cumbersome. Can someone please tell me what I am doing wrong with the script in this code. I have stripped the page down to the bare essentials for ease of viewing.


<html>
<head>
<title>Radio Button Array</title>

<script type="text/javascript" language="javascript">

	function displaychook(){
	
	var chookPics = new Array(5)
	chookPics[0] = "pics/chicken20.gif";
	chookPics[1] = "pics/chicken24.gif";
	chookPics[2] = "pics/chicken25.gif";
	chookPics[3] = "pics/chicken28.gif";
	chookPics[4] = "pics/chicken29.gif";
				
	for (i=0; i<4; i++)
	{
	if (document.chookselections.chook[i].checked == true){
	var checkNumber = document.chookselections.chook[i];	
	document.chookpic.src=chookPics[checkNumber];}
	}
	}
	
</script>

</head>
<body>

<table>
<tr>
<td>

<form name="chookselections">

<h2>Chook Selections</h2>

<input type="radio" name="chook" value="20" onClick="displaychook(this.form);">Chook 20
<br />
<input type="radio" name="chook" value="24" onClick="displaychook(this.form);">Chook 24
<br />
<input type="radio" name="chook" value="25" onClick="displaychook(this.form);">Chook 25
<br />
<input type="radio" name="chook" value="28" onClick="displaychook(this.form);">Chook 28
<br />
<input type="radio" name="chook" value="29" onClick="displaychook(this.form);">Chook 29

</form>

</td>
<td>

<img src="pics/chicken20.gif" name="chookpic" />

</td>
</tr></table>
</body>
</html>

Cheers Cheryl

2

from what I see of your code you are detecting which button was check by passing the form to the function then going back to that form to figure out which button you checked THEN getting that number and trying to access the array with it… now couple of problems and some silliness here:

here’s what I did:

<html>
<head>
<title>Radio Button Array</title>

<script type="text/javascript">

	function displaychook(box){
	
	var chookPics = new Array(5)
	chookPics[0] = "pics/chicken20.gif";
	chookPics[1] = "pics/chicken24.gif";
	chookPics[2] = "pics/chicken25.gif";
	chookPics[3] = "pics/chicken28.gif";
	chookPics[4] = "pics/chicken29.gif";
	document.getElementById('chookpic').src = chookPics[parseInt(box.value)];
	}
</script>

</head>
<body>

<table>
<tr>
<td>

<form name="chookselections">

<h2>Chook Selections</h2>

<input type="radio" name="chook" value="0" onclick="displaychook(this);">Chook 20
<br />
<input type="radio" name="chook" value="1" onclick="displaychook(this);">Chook 24
<br />
<input type="radio" name="chook" value="2" onclick="displaychook(this);">Chook 25
<br />
<input type="radio" name="chook" value="3" onclick="displaychook(this);">Chook 28
<br />
<input type="radio" name="chook" value="4" onclick="displaychook(this);">Chook 29

</form>

</td>
<td>

<img src="pics/chicken20.gif" name="chookpic" id="chookpic" />

</td>
</tr></table>
</body>
</html>

notice we got rid of ALL the loops and back and forth stuff to the form… we pass the box to the function, get its value and access the array to get the image.

I didnt have the images to play with but Im 99% sure it will work

OH YEAH and BTW, you were also trying to pass the numbers 20, 24 etc to get the arrays value BUT your array is only 5 long … so there wasnt any way to get something from an array possition that didnt exist!

3

Thanks so much. I tried your code and it works great. I still have a lot to learn about this stuff.

Cheers Cheryl

4

No problem … glad to hear it worked since I couldnt actually test it!