Solved

className change does not occur

Posted on 2004-08-09
7
14,536 Views
Last Modified: 2011-08-18
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
Comment
Question by:Michel Plungjan
  • 3
  • 3
7 Comments
 
LVL 17

Expert Comment

by:mreuring
ID: 11750974
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
 
LVL 33

Accepted Solution

by:
sajuks earned 250 total points
ID: 11750978
document.getElementsByName(saveAnchor)[0].style.className='off1';
remove the .style

document.getElementsByName(saveAnchor)[0].className='off1';
0
 
LVL 33

Expert Comment

by:sajuks
ID: 11750983
<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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 17

Expert Comment

by:mreuring
ID: 11751026
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
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 11751668
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11751755
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
 
LVL 33

Expert Comment

by:sajuks
ID: 11759812
Thanks for the points and grade.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now