Issue with several scripts on one page. [Archive]

chance

10-08-2002, 08:58 PM

Hello, I'm new to this forum and obviously, I'm stuck. Here is the problem. I'm trying to create a page with several scripts on it and once I add the 2nd script, nothing works. There are no "onload" event handlers with the tutorial for this issue spoke of. Here is the code:

<html>
<head>
<h1><font color="blue">2003 MDX Color Selections</font></h1><P>

<script language="javascript">

</script>

<table border="3" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="Havasu Blue Metallic.jpg"">Havasu
Blue</option>
<option value="midnight blue.jpg">Midnight Blue</option>
<option value="Nighthawk Black Pearl.jpg">Nighthawk
Black</option>
<option value="Redrock Pearl.jpg">Redrock Pearl</option>
<option value="Eternal Blue Pearl.jpg">Sage Brush</option>
<option value="Sandstone metallic.jpg">Sandstone
Metallic</option>
<option value="Starlight Silver Metallic.jpg">Starlight
Silver</option>
<option value="Taffeta White.jpg">Taffeta White</option>

</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="Havasu Blue Metallic.jpg" name="pictures"

width="378"
height="155"></td>
</tr>
</table>
</head>
</html><p><P><P><P><P><P><P><P><P><P><P><P><P>

<html>
<head>
<h1><font color="blue">2002 RSX Color Selections</font></h1><P>

<script language="javascript">

</script>

<table border="3" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="RSX Type-S Artic Blue Pearl .jpg"">Artic
Blue (Type-S only)</option>
<option value="RSX Desert Silver Metallic.jpg">Desert
Silver</option>
<option value="RSX Eternal Blue Pearl.jpg">Eternal Blue</option>
<option value="RSX Nighthawk Black Pearl.jpg">Nighthawk
Black</option>
<option value="RSX Type-S Premium White Pearl.jpg">Premium
White (Type-S only)</option>
<option value="RSX Redondo Red.jpg">Redondo Red</option>
<option value="RSX Satin Silver Metallic.jpg">Satin
Silver</option>
<option value="RSX Taffeta White.jpg">Taffeta White</option>

</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="RSX Type-S Artic Blue Pearl .jpg" name="pictures"

width="378"
height="155"></td>
</tr>
</table>
</head>
</html><p><P><P><P><P><P><P><P><P><P><P><P><P>

As you can see, it is the same scrip repeated again. The plan is to have this script a total of 7 times on one page. Any suggestions would be very much appreciated. Thank you very much for your time and help!!

adios

10-09-2002, 02:43 AM

Firstly: your HTML needs a little work. A single web page has one set of <html><head></head><body></body></html> tags, which serve as 'containers' for the page's content. You've got them all over the place. Secondly: if you do this:

function showimage()
......
<form name="mygallery">
......
<img src="Havasu Blue Metallic.jpg" name="pictures">

...the browser creates a function named 'showimage', a form named 'mygallery', and an image named 'pictures'. Then - you do the exact same thing again....needless to say, it's hard to identify something by name when you've assigned the name all over the place. Use different names each time:

function showimage(which)
{
if (!document.images)
return
document.images['pictures' + which].src=
document['mygallery' + which].picture.options[document['mygallery' + which].picture.selectedIndex].value
}

<form name="mygallery1"><p><select
name="picture" size="1" onChange="showimage(1)">
<option selected value="Havasu Blue Metallic.jpg"">Havasu
Blue</option>
.......
<img src="Havasu Blue Metallic.jpg" name="pictures1"

...etc. Second time around, use '2'.

Write the function definition once.