JS code validates, doesn't work in FireFox

**bbyle** · 08-15-2011, 12:45 AM

Hey guys, noobie here. I created a page with a thumbnail viewer. Click on a thumbnail and a larger version appears on the same page, NOT a pop up or Lightbox. It previews and validates fine. Even runs in IE. But not in FF(V. 3.6.18). Ideas? Code below with JS highlighted.

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  	<head>
	<title>603 products page</title>
	<link rel="stylesheet" type="text/css" href="css/603.css" />
	
	<script type="text/javascript">
<!-- <![CDATA[
function changeImage(filename)
{
  mainimage.src = filename;
}
// ]]> -->
</script>

	</head>

	<body>
		<div id="frame">
			<div id="logoheader">
			</div>
			<div id="navigation">
				<table align="center" cellpadding="0" cellspacing="0"border="0">
						<tr>
							<th><a href="index.html"><img src="images/buttons/homeup.png" border="0" alt="home"/></a></th>

							<th><img src="images/buttons/productsup.png" border="0" alt="products"/></th>
							<th><a href="web.html"><img src="images/buttons/webup.png" border="0" alt="web"/></a></th>
							<!--<th><a href="resume.html"><img src="images/buttons/resumeup.png" border="0" /></a></th>-->
							<th><a href="contact.html"><img src="images/buttons/contactup.png" border="0" alt="contact"/></a></th>
						</tr>
				</table>
				<!--home<a href="products.html"> | products | </a><a href="web.html">web / interface | </a><a href="resume.html">resume | </a><a href="contact.html">contact</a>-->
			</div>
			<div id="contentproducts">

				<div id="tablediv">
					<table align="center" cellpadding="0" border="0">
						<tr>
							<th><a href="javascript:changeImage('images/imageslarge/lumbarlarge.jpg')"><img src="images/slices/images/lumbarslice.jpg" border="0" alt="hh"/></a></th>
							<th><a href="javascript:changeImage('images/imageslarge/shaverlarge.jpg')"><img src="images/slices/images/shaverslice.jpg" border="0" alt="hh"/></a></th>
							<th><a href="javascript:changeImage('images/imageslarge/laptoplarge.jpg')"><img src="images/slices/images/laptopslice.jpg" border="0" alt="hh"/></a></th>
							<th><a href="javascript:changeImage('images/imageslarge/bodyformlarge.jpg')"><img src="images/slices/images/bodyformslice.jpg" border="0" alt="hh"/></a></th>
							<th><a href="javascript:changeImage('images/imageslarge/footlarge.jpg')"><img src="images/slices/images/footslice.jpg" border="0" alt="hh"/></a></th>
							<th><a href="javascript:changeImage('images/imageslarge/boomboxlarge.jpg')"><img src="images/slices/images/boomboxslice.jpg" border="0" alt="hh"/></a></th>

							<th><a href="javascript:changeImage('images/imageslarge/hhlarge.jpg')"><img src="images/slices/images/hhslice.jpg" border="0" alt="hh"/></a></th>
							<th><a href="javascript:changeImage('images/imageslarge/wandlarge.jpg')"><img src="images/slices/images/wandslice.jpg" border="0" alt="wand"/></a></th>
						</tr>
					</table>
					<!--START-->
					<div id="largeimage">
						<img name="mainimage" src="images/blank.jpg" alt="main image"/>
					</div>
							
					<!--END-->

				</div>
			</div>
			<div id="footer">
				<img src="images/copyright.png" border="0" alt="footer logo"/>
			</div>
		</div>

	</body>

</html>

**jscheuer1** · 08-15-2011, 04:47 AM

I'm not sure what you mean by validates. I'm not aware of any javascript validator per se.

I just tested in Firefox and its error console says:

Error: mainimage is not defined
Source File: test.htm
Line: 13

If you add the highlighted, it will work:

Code:

	<script type="text/javascript">
<!-- <![CDATA[
function changeImage(filename)
{
  document.images.mainimage.src = filename;
}
// ]]> -->
</script>

Notes: When you have an image tag on a page, it becomes part of the document.images collection. It can be accessed in that collection via its name, but the browser needs to know it's doing so. Technically speaking, to do just:

Code:

mainimage.src = filename;

implies that mainimage is a global variable of the window, the same as:

Code:

window.mainimage.src = filename;

Browsers used to always guess and figure it out for you if they could. Apparently Firefox is now being more strict about this. But if you spell it out, Firefox doesn't have to guess and will 'get it'. IE already guessed right, and will be fine with the added specificity, so will still work.

Thread: JS code validates, doesn't work in FireFox

Thread Tools

Search Thread

JS code validates, doesn't work in FireFox

Bookmarks

Bookmarks

Posting Permissions