Beginner JavaScript/HTML Frame Communication

StackOverflow https://stackoverflow.com/questions/18817902

Question

One of my assignments for my Web Design class is to create a page in which two frames communicate using JavaScript. There are four links on the lower frame (lower2.html) and when clicked, they're supposed to change the image in the upper frame (upper1.html) to the respective image but don't. Here's what I have:

File name: js-seventeen.html. This is the one I execute.

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
</HEAD>
<FRAMESET ROWS="140,*">
<FRAME NAME="upperFrame" SRC="upper1.html">
<FRAME NAME="lowerFrame" SRC="lower2.html">
</FRAMESET>
</HTML>

File name: upper1.html. This is the upper frame that displays the images.

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG NAME="upperImage" SRC="lions.gif">
</CENTER>
</BODY>
</HTML>

File name: lower2.html. This is the lower frame that contains the links that should change the images, but don't. No matter what I click, it stays on the default lions.gif.

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
<SCRIPT>
function setImage(number)
{
if (number==1)
{
    parent.upperFrame.document.upperImage.src="lions.gif";
}
if (number==2)
{
    parent.upperFrame.document.upperImage.src="tigers.gif";
}
if (number==3)
{
    parent.upperFrame.document.upperImage.src="bears.gif";
}
if (number==4)
{
    parent.upperFrame.document.upperImage.src="ohmy.gif";
}
return;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H2>IMAGE LIST</H2>
<TABLE>
<TR><TD><A HREF="javascript:setImage(1)">1: LIONS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(2)">2: TIGERS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(3)">3: BEARS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(4)">4: OHMY.GIF</A></TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

I've looked through the book and as far as I can tell, I've done everything properly. Thanks in advance for your help.

Was it helpful?

Solution

JavaScript mostly works in IDs. top gives you the main window.

Add ID attributes to frame and image tags

<frame id="upperFrame" name="upperFrame" >

You can also access frame by index

 top.frames[0].document.  ,,,

Read www.w3schools.com stuff. Also frameset has been done away with in HTML5 so consider learning about iframes

Assign IDs to the frame and image as well, make ID same as name and try something like this

 top.frames["upperFrame"].document.getElementById["imageIdNotName"].src = 'new value';
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top