•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 375,195 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,167 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1928 | Replies: 11 | Solved
 |
•
•
Join Date: Jan 2008
Posts: 18
Reputation: 
Rep Power: 1
Solved Threads: 0
Newbie Poster
document.getElementById problem Hello,
I have this in my CSS:
And want to change the color with Javascript's function: document.getElementById, but when I use document.getElementById('contentbox a').style.color= "#d05048", I get an error that it doesn't know 'contentbox a'.
I tried multiple things and searched on google, but I cannot get it to work.
Who can help me? It's a simple question...
I have this in my CSS:
#contentbox a{
font-weight: bold;
color: #c8a468;
cursor: pointer;
}And want to change the color with Javascript's function: document.getElementById, but when I use document.getElementById('contentbox a').style.color= "#d05048", I get an error that it doesn't know 'contentbox a'.
I tried multiple things and searched on google, but I cannot get it to work.
Who can help me? It's a simple question...
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 4
Solved Threads: 15
Junior Poster
Hi there,
you have made mistake here
that should look like
Example:
CSS:
javascript:
HTML:
hope this will help you
Rahul Dev
you have made mistake here
document.getElementById('contentbox a').style.color= "#d05048"that should look like
document.getElementById('contentbox').style.color= "#d05048"Example:
CSS:
<style type="text/css">
#contentbox, #contentbox a{
font-weight: bold;
color: #c8a468;
cursor: pointer;
}
</style><script type="text/javascript">
function changeColor(){
var divID = document.getElementById('contentbox');
divID.style.color= "#d05048";
}
</script>HTML:
<div id="contentbox"> <a href="javascript:void(0);" onClick="changeColor()">Link Text</a> Other Text </div>
hope this will help you
Rahul Dev
Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
•
•
Join Date: Jan 2008
Posts: 18
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
Hi, thanks for your help, but the 'a' is there on purpose. I want to change the colour of links only in the div 'contentbox' (with javascript).
•
•
Join Date: Jan 2008
Location: Bangalore, India
Posts: 327
Reputation:
Rep Power: 0
Solved Threads: 31
Posting Whiz
hi you can not do directly like this, the way you have tried is wrong.
getElementById() takes only id.
use elem.getElementsByTagName('tag name');
this will return array of element('tag name') inside elem.
using loop you can...........
i think this much is enough.
getElementById() takes only id.
use elem.getElementsByTagName('tag name');
this will return array of element('tag name') inside elem.
using loop you can...........
i think this much is enough.
A computer lets you make more mistakes faster than any invention in human history - with the possible exceptions of handguns and tequila.
~Mitch Ratcliffe
~Mitch Ratcliffe
•
•
Join Date: Feb 2008
Location: bangalore
Posts: 19
Reputation:
Rep Power: 1
Solved Threads: 2
Newbie Poster
Re: document.getElementById problem <style content="text/css">
#contentbox a{
font-weight: bold;
color: #c8a468;
cursor: pointer;
}
</style>
<script content="text/javascript">
function text_over(){
document.getElementById('contentbox a').style.color= "#d05048";
}
function text_out(){
document.getElementById('contentbox a').style.color= "#c8a468";
}
</script>
</HEAD>
<BODY>
<div id="contentbox">
<a href="......" id="contentbox a" onMouseover="text_over()" onMouseout="text_out()">infinite</a>
</div>
</BODY>
i think this may help you.
#contentbox a{
font-weight: bold;
color: #c8a468;
cursor: pointer;
}
</style>
<script content="text/javascript">
function text_over(){
document.getElementById('contentbox a').style.color= "#d05048";
}
function text_out(){
document.getElementById('contentbox a').style.color= "#c8a468";
}
</script>
</HEAD>
<BODY>
<div id="contentbox">
<a href="......" id="contentbox a" onMouseover="text_over()" onMouseout="text_out()">infinite</a>
</div>
</BODY>
i think this may help you.
•
•
Join Date: Jan 2008
Posts: 18
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
aravelli, that works, thank you, but only for the first one containing the id. On some pages I have more links and now only the first one changes.
this is what I have:
there is a try...cath function because some pages don't have the 'contentbox a' id.
this is what I have:
try{document.getElementById('contentbox a').style.color= "#d05048";}catch(err){};there is a try...cath function because some pages don't have the 'contentbox a' id.
•
•
Join Date: Feb 2008
Location: bangalore
Posts: 19
Reputation:
Rep Power: 1
Solved Threads: 2
Newbie Poster
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
a:link {
color: #c8a468;
text-decoration: none;
}
a:visited {
color: #d05048;
text-decoration: none;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #84414A;
text-decoration: none;
}</style>
</HEAD>
<BODY>
<div id="contentbox">
<a href="......">text goes here</a><br>
<a href="......">text goes here</a><br>
<a href="......">text goes here</a>
</div>
</BODY>
</HTML>
why can't you go like this
instead of using javascript
i think this will help for ur need
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
a:link {
color: #c8a468;
text-decoration: none;
}
a:visited {
color: #d05048;
text-decoration: none;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #84414A;
text-decoration: none;
}</style>
</HEAD>
<BODY>
<div id="contentbox">
<a href="......">text goes here</a><br>
<a href="......">text goes here</a><br>
<a href="......">text goes here</a>
</div>
</BODY>
</HTML>
why can't you go like this
instead of using javascript
i think this will help for ur need
•
•
Join Date: Jan 2008
Posts: 18
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
I have links in the contentbox and I have links in my menu. When I use CSS to change "a" the menu gets the wrong colours and cannot be fixed with div's because the "a" tag comes as last and so overwrites the rest.
I want to only change the link colours in the contentbox but javascript doesn't understand the id "contentbox a" because it's the id "a" in the id "contentbox" .
When I gave the links an id (all the same id) it worked, but javascript only changed the first id, while there are more on some pages. Maybe it can be done with a while loop, but I have no idea how.
I want to only change the link colours in the contentbox but javascript doesn't understand the id "contentbox a" because it's the id "a" in the id "contentbox" .
When I gave the links an id (all the same id) it worked, but javascript only changed the first id, while there are more on some pages. Maybe it can be done with a while loop, but I have no idea how.
•
•
Join Date: Feb 2008
Location: bangalore
Posts: 19
Reputation:
Rep Power: 1
Solved Threads: 2
Newbie Poster
<style type="text/css">
#contentbox a:link {
color: #c8a468;
text-decoration: none;
}
#contentbox a:visited {
color: #d05048;
text-decoration: none;
}
#contentbox a:hover {
color: #666666;
text-decoration: none;
}
#contentbox a:active {
color: #84414A;
text-decoration: none;
}</style>
change the css like this
#contentbox a:link {
color: #c8a468;
text-decoration: none;
}
#contentbox a:visited {
color: #d05048;
text-decoration: none;
}
#contentbox a:hover {
color: #666666;
text-decoration: none;
}
#contentbox a:active {
color: #84414A;
text-decoration: none;
}</style>
change the css like this
•
•
Join Date: Jan 2007
Posts: 2,433
Reputation:
Rep Power: 6
Solved Threads: 99
An id can be used only once. It can NOT appear in multiple tags.
You need to give each tag a unique id, and then cycle through the ids with a loop in js.
e.g.
You need to give each tag a unique id, and then cycle through the ids with a loop in js.
e.g.
<a .... id="aa1"> <a .... id="aa2"> <a .... id="aa3"> <a .... id="aa4"> <a .... id="aa5">
Daylight-saving time uses more gasoline
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- IE7 document.getElementById problem (JavaScript / DHTML / AJAX)
- getElementById problem in Firefox (JavaScript / DHTML / AJAX)
- Problem using onload (JavaScript / DHTML / AJAX)
- Problem with View More Messages title appearing (JavaScript / DHTML / AJAX)
- How can fix the problem? (JavaScript / DHTML / AJAX)
- Problem with <div> height - Controlling flow from center div (JavaScript / DHTML / AJAX)
- Add textbox to editable div problem (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Replacing one object with another
- Next Thread: Expandable Javascript Text Block Problem
