 |  |  |  |  |  |  |  |
document.getElementById problem
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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...
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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
that should look like
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
Example:
CSS:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
HTML:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
hope this will help you
Rahul Dev
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
Posts: 483
Reputation: 
Solved Threads: 58
Posting Pro in Training
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.
Freedom in the Mind, Faith in the words.. Pride in our Souls...
Indian Developer
http://falaque.wordpress.com/
Indian Developer
http://falaque.wordpress.com/
<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.
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
there is a try...cath function because some pages don't have the 'contentbox a' id.
<!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
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.
<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: 3,210
Reputation:
Solved Threads: 165
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.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
Daylight-saving time uses more gasoline
 |
Similar Threads
- 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
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Latest JavaScript / DHTML / AJAX Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
acid2 ajax ajaxcode ajaxhelp animate automatically beta box bug calendar captcha cart checkbox child class column cookies createrange() css cursor decimal design dom download dropdown editor element engine enter error events explorer file focus form forms frameworks google gwt html htmlform ie8 iframe image() images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jump listbox math matrixcaptcha menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent pdf php player post problem progressbar prototype rated rating regex runtime scale scroll search select session shopping size sql star starrating stars text textarea validation w3c web website window windowofwords windowsxp wysiwyg xml \n
