Solved

className change does not occur

Posted on 2004-08-09
7
14,532 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
Comment Utility
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
Comment Utility
document.getElementsByName(saveAnchor)[0].style.className='off1';
remove the .style

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

Expert Comment

by:sajuks
Comment Utility
<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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 17

Expert Comment

by:mreuring
Comment Utility
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
Comment Utility
0
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
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
Comment Utility
Thanks for the points and grade.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

762 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

12 Experts available now in Live!

Get 1:1 Help Now