Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

className change does not occur

Posted on 2004-08-09
7
Medium Priority
?
14,545 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1000 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

670 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