DaniWeb IT Discussion Community
Page 1 of 2 1 2 >
Show 40 post(s) from this thread on one page

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)
-   JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)
-   -   document.getElementById problem (http://www.daniweb.com/forums/thread109868.html)

Begjinner Feb 19th, 2008 1:51 pm
document.getElementById problem
 
Hello,

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...

katarey Feb 19th, 2008 2:37 pm
Re: document.getElementById problem
 
Hi there,

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>
javascript:
<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

Begjinner Feb 19th, 2008 2:47 pm
Re: document.getElementById problem
 
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).

DangerDev Feb 20th, 2008 8:26 am
Re: document.getElementById problem
 
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.

aravelli Feb 26th, 2008 2:15 am
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.

Begjinner Feb 26th, 2008 5:25 am
Re: document.getElementById problem
 
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:
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.

aravelli Feb 26th, 2008 6:15 am
Re: document.getElementById problem
 
<!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

Begjinner Feb 26th, 2008 6:32 am
Re: document.getElementById problem
 
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.

aravelli Feb 26th, 2008 6:41 am
Re: document.getElementById problem
 
<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

MidiMagic Feb 27th, 2008 2:19 am
Re: document.getElementById problem
 
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.
<a .... id="aa1">

<a .... id="aa2">

<a .... id="aa3">

<a .... id="aa4">

<a .... id="aa5">


All times are GMT -4. The time now is 1:40 am.
Page 1 of 2 1 2 >
Show 40 post(s) from this thread on one page

Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC