Switching images with javascript - please help

snowfalldream · Nov 21, 2007

I am working on an assignment for class and have been trying and trying to get the code right, but just can't seem to do it. I have tried every example in the lesson, and it just isn't working. I don't want someone to do it for me, I just need help with it to see where I am going wrong. I am sure once I get the part that I am messing up on, the rest will fall into place.

What needs to happen is this: there is an image of a person that is divided into four sections (upper left, upper right, lower left, lower right). There are two drop down menus that allow you to switch the pieces of the picture to scramble it up. The menu options are identical, the point is to select a portion of the picture in Menu A and switch it with the portion in Menu B (again, by using the drop down menus). You then click on a button located below the picture which is named (or its value is) "swap".

This is the code we were provided with. We are to input the code missing after "function swap ()"

<HTML>

<HEAD>

<TITLE>Assignment 11</TITLE>

<SCRIPT>

function swap ()
{

}
</SCRIPT>

</HEAD>

<BODY>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth2.gif"></TD>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth3.gif"></TD>
</TR>

<TR>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth6.gif"></TD>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth7.gif"></TD>
</TR>

</TABLE>

<P>

<FORM NAME="arranger">

Select the two pieces that you want to swap:

<BR>

<SELECT NAME="a">
<OPTION> Upper Left </OPTION>
<OPTION> Upper Right </OPTION>
<OPTION> Lower Left </OPTION>
<OPTION> Lower Right </OPTION>
</SELECT>

<SELECT NAME="b">
<OPTION> Upper Left </OPTION>
<OPTION> Upper Right </OPTION>
<OPTION> Lower Left </OPTION>
<OPTION> Lower Right </OPTION>
</SELECT>

<P>

<INPUT
TYPE=button
VALUE="Swap"
ONCLICK="swap();">

</FORM>

</BODY>

</HTML>

And this is the code I have now... it has become very jumbled as I have tried to rearrange and rearrange to satisfy the error messages I keep getting. I know this must be far off, but I don't know where it went wrong to begin with!

<HTML>

<HEAD>

<TITLE>Assignment 11</TITLE>

<SCRIPT>

function swap ()
{

var indexA = 0;

if (document.arranger.a[0].selected)
{
document.arranger.a[0] = document.arranger.a[0];
}

else if (document.arranger.a[1].selected)
{
document.arranger.a[1] = document.arranger.a[1];
}

else if (document.arranger.a[2].selected)
{
document.arranger.a[2] = document.arranger.a[2];
}

else
{
document.arranger.a[3] = document.arranger.a[3];
}

alert(indexA);

var indexB = 0;

if (document.arranger.a[0].selected)
{
document.a[0] = document.a[0];
}

else if (document.arranger.a[1].selected)
{
document.a[1] = document.a[1];
}

else if (document.arranger.a[2].selected)
{
document.a[2] = document.a[2];
}

else
{
document.a[3] = document.a[3];
}

alert(indexB);

}

</SCRIPT>

</HEAD>

<BODY>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth2.gif"></TD>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth3.gif"></TD>
</TR>

<TR>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth6.gif"></TD>
<TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth7.gif"></TD>
</TR>

</TABLE>

<P>

<FORM NAME="arranger">

Select the two pieces that you want to swap:

<BR>

<SELECT NAME="a">
<OPTION> Upper Left </OPTION>
<OPTION> Upper Right </OPTION>
<OPTION> Lower Left </OPTION>
<OPTION> Lower Right </OPTION>
</SELECT>

<SELECT NAME="b">
<OPTION> Upper Left </OPTION>
<OPTION> Upper Right </OPTION>
<OPTION> Lower Left </OPTION>
<OPTION> Lower Right </OPTION>
</SELECT>

<P>

<INPUT
TYPE=button
VALUE="Swap"
ONCLICK="swap();">

</FORM>

</BODY>

</HTML>

PC-XT · Nov 25, 2007

For one thing, you say

document.arranger.a[0] = document.arranger.a[0];
Click to expand...

etc. when I think you mean to set indexA or indexB to the index number, right?

Log in or Sign up

Switching images with javascript - please help

snowfalldream Private E-2

PC-XT Master Sergeant