Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 14555
  • Last Modified:

className change does not occur

Why does this not change the colour of the anchor text??

<style>
.on1 { color:red }
.off1 { color:blue }
</style>
<script>
saveAnchor=""
function go(link) {
  anchorName=link.hash.substring(1)
  if (saveAnchor) document.getElementsByName(saveAnchor)[0].style.className='off1';
  document.getElementsByName(anchorName)[0].style.className='on1';
  saveAnchor=anchorName
 
}
</script>
 <a href="#Heading One" target="Mainframe" onClick="go(this)">Heading One</a>
Mainframe anchor: <a name="Heading One" class="off1">Heading One</a>
 <a href="#Heading Two" target="Mainframe" onClick="go(this)">Heading Two</a>
Mainframe anchor: <a name="Heading Two" class="off1">Heading Two</a>

Thanks
0
Michel Plungjan
Asked:
Michel Plungjan
  • 3
  • 3
1 Solution
 
mreuringCommented:
To my knowledge there is no such thing as getElementsByName and if there was it would quite certainly not work with names that have space characters in them. Also the className is a property of the objects itsself, not of the style collection.
You could likely make your script function with some minor ajustments though:
saveAnchor=false;
function go(link) {
  if (saveAnchor) saveAnchor.className='off1';
  link.className='on1';
  saveAnchor=link;
}
0
 
sajuksCommented:
document.getElementsByName(saveAnchor)[0].style.className='off1';
remove the .style

document.getElementsByName(saveAnchor)[0].className='off1';
0
 
sajuksCommented:
<style>
.on1 { color:red }
.off1 { color:blue }
</style>
<script>
saveAnchor=""
function go(link) {
  anchorName=link.hash.substring(1)
  if (saveAnchor) document.getElementsByName(saveAnchor)[0].className='off1';
  document.getElementsByName(anchorName)[0].className='on1';
  saveAnchor=anchorName
 
}
</script>
 <a href="#Heading One" target="Mainframe" onClick="go(this)">Heading One</a>
Mainframe anchor: <a name="Heading One" class="off1">Heading One</a>
 <a href="#Heading Two" target="Mainframe" onClick="go(this)">Heading Two</a>
Mainframe anchor: <a name="Heading Two" class="off1">Heading Two</a>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mreuringCommented:
I just had to know and looked up the getElementsByName(String) method. It's a microsoft extention that requires the name attribute of an object to be set. My apologies, I overlooked part of your example code and what I suggested will not work. Go with Sajuks code to make it work, I would not suggest using a microsoft extention, instead I would recode the page to keep standards compliant:
- use id's instead of named links. '<p id="HeadingOne">any html code here</p>' will provide the same ease of use as '<a name="HeadingOne">any html code here</a>'
- Don't use id's with spaces in them, it's not allowed and will in most cases break your scripts.

This would allow you to write the scipt in such a way that it would work in any CSS2 browser:
saveAnchor="";
function go(link) {
  anchorName=link.hash.substring(1);
  if (saveAnchor) document.getElementById(saveAnchor).className='off1';
  document.getElementById(anchorName).className='on1';
  saveAnchor=anchorName;
}

Hope you're encourage to go standards :),

  Martin
0
 
mreuringCommented:
Hmmm, good one, never bothered to check the HTML portion of the DOM2 reference... :) (On a side-note, do you know which reference specifies that the global 'document' element points to an instance of the HTMLDocument?)

I'd still move to using id's (only in small part due to being stubborn), but that would now remain a personal preference towards xhtml (and possibly strict) where the name attribute is deprecated.
0
 
sajuksCommented:
Thanks for the points and grade.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now