document.getElementById problem

Question

Begjinner 0 Light Poster

16 Years Ago

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

javascript

8 Contributors
13 Replies
174 Views
1 Year Discussion Span
Latest Post 14 Years Ago Latest Post by wrivera

Recommended Answers

Answered by katarey 27 in a post from 16 Years Ago

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(){ …

Jump to Post

Answered by DangerDev 107 in a post from 16 Years Ago

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.

Jump to Post

Answered by aravelli 0 in a post from 16 Years Ago

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

Jump to Post

Answered by aravelli 0 in a post from 16 Years Ago

<!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; …

Jump to Post

All 13 Replies

katarey 27 Junior Poster

16 Years Ago

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

DangerDev 107 Posting Pro in Training

16 Years Ago

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 0 Newbie Poster

16 Years Ago

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

Edited 11 Years Ago by happygeek because: fixed formatting

aravelli 0 Newbie Poster

16 Years Ago

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

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Begjinner 0 Light Poster · Answer 1 · 2008-02-20T01:47:50+00:00

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

Begjinner 0 Light Poster · Answer 2 · 2008-02-26T16:25:36+00:00

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.

Begjinner 0 Light Poster · Answer 3 · 2008-02-26T17:32:12+00:00

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 0 Newbie Poster · Answer 4 · 2008-02-26T17:41:41+00:00

change the css like this

MidiMagic 579 Nearly a Senior Poster · Answer 5 · 2008-02-27T13:19:27+00:00

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

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 6 · 2008-02-27T13:57:53+00:00

Alternatively, try this trick, if you don't mind presetting the available colors ( in a way, it's better because those colours can be defined in the CSS ). This works by dynamically changing the class of the containing element, the CSS 'cascade' effect sorts out the rest:

<html>
  <head>
    <title>Color changing magic with a classname trick</title>
    <style type="text/css">
      div.red_links a
      {
        color:red;
      }
      div.blue_links a
      {
        color:blue;
      }
    </style>
    <script type="text/javascript">
      function set_linkcolor( to )
      {
        document.getElementById( "color_state" ).className = 
              to + "_links";
      }
    </script>
  </head>
  <body>
    <div id="color_state" class="red_links">
      <ul>
        <li><a>An anchor</a></li>
        <li><a>Another</a></li>
        <li><a>And another</a></li>
        <li>Some normal text</li>
        <li>Some more..</li>
        <li>And some more</li>
      </ul>
    </div>
    <span onmousedown="set_linkcolor( 'blue' )" 
         onmouseup="set_linkcolor( 'red' )" 
         style="border:solid 1px black;">
      Click me!
    </span>
  </body>
</html>

Begjinner 0 Light Poster · Answer 7 · 2008-02-27T15:53:43+00:00

Thanks MattEvans, after a short trying period I got it working with your 'system'.

bertsaga 0 Newbie Poster · Answer 8 · 2010-01-10T21:22:32+00:00

You should go like this...

//////////////// elementParentId  is the Id of the element that contains all the elemens to be changed, newColor explains itself, tagName is the type of element you want to change/////////////////////////

function changeColor(elementParentId , tagName, newColor){    

elements=document.getElementById(elementParentId ).getElementsByTagName(tagName);

for(i=0;i<elements.length;i++){
       elements[i].style.color=newColor;
}

}

changeColor('contentbox','a','#d05048');

wrivera 0 Junior Poster in Training · Answer 9 · 2010-01-13T05:31:14+00:00

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.

you need to do it this way

var num=document.getElementById("contentbox").childNodes.length;
	for(var i=0;i<num;i++){
if(document.getElementById("contentbox").childNodes[i].nodeName=="A"){
document.getElementById("contentbox").childNodes[i].style.color="#d05048";
		}
	}

essentially you loop through all the elements of div content box for all the links and then you change them.

document.getElementById problem

Recommended Answers Collapse Answers

All 13 Replies

Recommended Answers