getElementsByName Problem

WWWDesignWizard · #1 (**permalink**) 06-25-2006, 07:16 PM

Hello all!

I seem to have run into a quite frustrating problem involving JavaScript and the getElementsByName method.

What I am trying to do involves a expand/collapse content script. I got the content to expand and collapse fine, but along with the content expanding and collapsing I would like to have the arrow image which triggers the change (when the user click the image) to also change depending on the current status of the content.

In short, I want the arrow image to change depending on whether the content is collapsed or expanded.

What I have coded works fine with one image, but when I have more than one collapsible/expandable block of content (which means more than one arrow) I can't get the arrow that cooresponds to the content being changed to change.

What I am trying to do is use the getElementsByName method to change the arrow with the name that is also the ID of the content DIV.

With the code I currently have, when I click the arrow to expand the content the arrow completely disappears and the content does not expand. I can't seem to figure out what is causing this. When I call "document.getElementsByName(Result).src" before the function (to see if it's getting the correct image URL) using an alert message I get an output of "undefined." Why is this outputting "undefined" instead of the URL of the current image?

If anyone has any ideas or has a possible solution to make the arrows change on click it would be greatly aprreciated.

Code:

<HEAD>

<SCRIPT>
function DispContent(Result)
{
  if(document.getElementById(Result).style.display == "none")
	{
    document.getElementById(Result).style.display = "block";
		document.getElementsByName(Result).src = "Images/Arrow_Expanded.gif";
  } 
  else
	{
    document.getElementById(Result).style.display = "none";
		document.getElementsByName(Result).src = "Images/Arrow_Collapsed.gif";
  }
}
</SCRIPT>

</HEAD>

<BODY>
[img]Images/Arrow_Collapsed.gif[/img] <B STYLE="margin-left: 5px;">On Sunday, January 01, the Pine-Richland Rams took on Null.[/b]
<DIV ID="010100" STYLE="display: none;">


<TABLE BORDER="0" FRAME="void" RULES="none" CELLSPACING="0" CELLPADDING="0" CLASS="Results">
<TR>
<TD WIDTH="70">Men:</TD>
<TD WIDTH="65">PR - 00</TD>
<TD WIDTH="65">Null - 00</TD>
</TR>
<TR>
<TD WIDTH="70">Women:</TD>
<TD WIDTH="65">PR - 00</TD>
<TD WIDTH="65">Null - 00</TD>
</TR>
</TABLE>



<FONT COLOR="#303030" CLASS="Results_Highlights" STYLE="font-weight: bold; font-style: italic;">Ram Highlights:</FONT>



<SPAN CLASS="Results_Highlights">Men:</SPAN>
<UL STYLE="margin-top: 5px;">
<LI CLASS="Results_Highlights">Lorem ipsum.</LI>[/list]<SPAN CLASS="Results_Highlights">Women:</SPAN>
<UL STYLE="margin-top: 5px;">
<LI CLASS="Results_Highlights">Lorem ipsum.</LI>[/list]</DIV>
</BODY>

I do not have the webpage uploaded yet, but if it would make debugging easier by looking at the entire source I don't mind uploading it.

Thanks again for any comments, suggestions, and help! ^_^

Regards,
Mike

sands · #2 (**permalink**) 06-28-2006, 10:29 AM

Sorry, no time to go through your code, but why do you want to have images? If text (+ and -) would do for you, check out this script:
http://www.sivamdesign.com/scripts/dwld/col_menu.html