Solved

className change does not occur

Posted on 2004-08-09
7
14,539 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

803 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